/* ============================================================
   FLEXa — design tokens
   Operated by Blaxposure · developed by The Sovereign Series (Pty) Limited
   Rev 1.0 · 29 July 2026

   The single source of colour, type, spacing, radius and motion for
   every FLEXa surface. Import once at app root:

       <link rel="stylesheet" href="flexa-tokens.css">

   In Blazor: reference from wwwroot/css/app.css with @import.
   In .NET MAUI: mirror these values in Resources/Styles/Colors.xaml —
   this file stays the authority; the XAML is a transcription.
   ============================================================ */

:root {
  /* ---- Substrate: product (dark) ------------------------- */
  --flexa-page:            #0A0A0A;   /* app, kiosk, console background   */
  --flexa-surface:         #17170F;   /* the only raised level. No third. */
  --flexa-surface-alt:     #0F0F0A;   /* code blocks, inset panels        */

  /* ---- Ink ---------------------------------------------- */
  --flexa-ink:             #FFFFFF;   /* headings, amounts, results       */
  --flexa-body:            #D6D6C6;   /* paragraphs                       */
  --flexa-muted:           #8A8A7C;   /* labels, meta, hairline text      */

  /* ---- Accent ------------------------------------------- */
  --flexa-accent:          #FFE500;   /* ONE action or selection per view */
  --flexa-on-accent:       #0A0A0A;   /* never white on accent            */

  /* ---- Danger: TWO reds, never interchangeable ---------- */
  --flexa-danger:          #FF3B2F;   /* small marks on dark ONLY         */
  --flexa-danger-surface:  #C81E12;   /* full-bleed refusal. AA w/ white. */
  --flexa-on-danger:       #FFFFFF;

  /* ---- Structure ---------------------------------------- */
  --flexa-line:            rgba(255, 229, 0, 0.20);  /* hairlines, not shadows */
  --flexa-line-soft:       rgba(255, 229, 0, 0.12);
  --flexa-idle:            #2E2E22;   /* empty bars, disabled fills       */

  /* ---- Data visualisation: use in this order ------------ */
  --flexa-viz-1:           #FFE500;   /* primary series                   */
  --flexa-viz-2:           #B99C1E;   /* secondary                        */
  --flexa-viz-3:           #4F5B4A;   /* pre-agent / pre-change baseline  */
  --flexa-viz-4:           #FF3B2F;   /* regression                       */
  --flexa-viz-5:           #2E2E22;   /* empty / idle                     */
  /* A chart needing a sixth colour needs fewer series.      */

  /* ---- Type -------------------------------------------- */
  --flexa-font-sans: Archivo, "Helvetica Neue", Arial, sans-serif;
  --flexa-font-mono: "Space Mono", ui-monospace, "Courier New", monospace;
  /* Mono carries money, time, codes, IDs and labels — anything a machine
     produced or a human must read back. No third family. No italics.     */

  --flexa-size-display:    52px;
  --flexa-size-title:      29px;
  --flexa-size-heading:    19px;
  --flexa-size-body:       15px;
  --flexa-size-data:       15px;
  --flexa-size-label:      10px;   /* uppercase mono, 0.2em tracking      */
  /* Floors: 13px product · 12pt print · 24px kiosk · 14px mail.          */

  --flexa-track-display:   -0.035em;
  --flexa-track-title:     -0.025em;
  --flexa-track-label:     0.2em;
  --flexa-leading-body:    1.55;

  /* ---- Spacing: one scale, everywhere ------------------- */
  --flexa-space-1: 4px;
  --flexa-space-2: 8px;
  --flexa-space-3: 12px;
  --flexa-space-4: 16px;
  --flexa-space-5: 22px;
  --flexa-space-6: 34px;
  --flexa-space-7: 56px;
  /* Gaps come from flex/grid `gap`, never stacked margins.               */

  /* ---- Radius ------------------------------------------ */
  --flexa-radius-data:     3px;   /* data cells, chips                    */
  --flexa-radius-control:  4px;   /* small controls                       */
  --flexa-radius-card:     6px;   /* cards, buttons                       */
  --flexa-radius-pill:     999px;
  /* Nothing else.                                                        */

  /* ---- Touch ------------------------------------------- */
  --flexa-touch-primary:   56px;  /* primary target height, mobile        */
  --flexa-touch-min:       44px;  /* absolute floor for anything tappable */

  /* ---- Motion ------------------------------------------ */
  --flexa-ease:            cubic-bezier(0.16, 1, 0.3, 1);  /* ease-out    */
  --flexa-dur-state:       180ms;  /* state change                        */
  --flexa-dur-result:      420ms;  /* result takeover                     */
  --flexa-dur-code:        30s;    /* the access ring. Linear, exactly.   */
  /* Motion confirms a state change or shows time running out. Nothing
     decorative animates.                                                 */

  /* ---- Layout ------------------------------------------ */
  --flexa-max-content:     1440px;
  --flexa-panel-min:       290px;  /* panels wrap; never shrink below      */
}

/* ============================================================
   Substrate: print / mail / document (light)
   Same forms, warmer stock, ink-safe accent.
   Apply with <html data-flexa-theme="print">
   ============================================================ */

[data-flexa-theme="print"] {
  --flexa-page:            #EFEBE0;
  --flexa-surface:         #FFFFFF;
  --flexa-surface-alt:     #F4F1E8;
  --flexa-ink:             #14140F;
  --flexa-body:            #3A3A2E;
  --flexa-muted:           #75705F;
  --flexa-accent:          #FFC400;
  --flexa-on-accent:       #14140F;
  --flexa-danger:          #D93B1E;
  --flexa-danger-surface:  #A82A0E;
  --flexa-line:            rgba(20, 20, 15, 0.14);
  --flexa-line-soft:       rgba(20, 20, 15, 0.08);
  --flexa-idle:            #DCD6C6;
}

/* ============================================================
   Reduced motion — every transition becomes an instant state and
   the access countdown becomes a static number.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --flexa-dur-state:  0ms;
    --flexa-dur-result: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Access-code countdown ring — the one animation that is
   structural rather than decorative. Linear, 30s, no easing.
   ============================================================ */

@keyframes flexa-code-deplete {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: var(--flexa-ring-circumference, 754); }
}

@keyframes flexa-live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.22; }
}

@keyframes flexa-result-pop {
  0%   { transform: scale(0.72); opacity: 0; }
  60%  { transform: scale(1.05); }
  100% { transform: scale(1);    opacity: 1; }
}