/* ===========================================================================
   tokens.css — the interface's design tokens.

   One source of truth for every screen: the dashboard, the editor, the account
   pages. Screen-only. Nothing here may affect a printed certificate — the
   sheet is owned entirely by certificate.css and direction_page.css, and
   neither imports this file.

   The palette follows the Material scheme from the reference design: light
   surfaces on a near-white background, a single blue for action and focus, red
   reserved for destructive intent. Green and red still carry the inspection
   outcome inside a certificate, where they mean something.

   Every colour lives here. A component that hard-codes one stops following the
   theme, which is what would otherwise make a retheme a five-file edit instead
   of a one-file edit.
   =========================================================================== */

:root {
  /* --- surfaces: "lowest" is the paper the interface is drawn on --------- */
  --surface-lowest:  #ffffff;   /* app bar, panel, cards, toolbar           */
  --surface:         #f7f9fb;   /* page background                          */
  --surface-low:     #f2f4f6;   /* wells: inputs, grouped controls          */
  --surface-mid:     #eceef0;   /* the workspace behind the sheet           */
  --surface-high:    #e6e8ea;   /* hover on a well                          */
  --surface-highest: #e0e3e5;   /* dividers on tinted ground                */

  /* Named for their role in the shell, so component CSS reads plainly.

     NOTE: --ink and --lh-body are deliberately NOT defined here. The sheet
     stylesheets declare their own :root with those exact names (--ink is the
     certificate ink colour, --lh-body its 11pt leading), and a custom
     property is global no matter which file sets it. Defining them here made
     the winner depend on stylesheet order, which is not something the printed
     certificate should ever depend on. */
  --sunk:      var(--surface-low);     /* recessed fields                   */
  --raised:    var(--surface-lowest);  /* cards and buttons                 */
  --raised-hi: var(--surface-low);     /* the same, hovered                 */
  --stage:     var(--surface-mid);     /* behind the paper                  */

  /* --- lines ------------------------------------------------------------- */
  --line:      #c6c6cd;      /* outline-variant: the ordinary border        */
  --line-soft: #e0e3e5;      /* hairlines inside a card                     */
  --line-hi:   #76777d;      /* outline: emphasis and hover                 */

  /* --- text --------------------------------------------------------------- */
  --text:        #191c1e;    /* on-surface                                  */
  --text-dim:    #45464d;    /* on-surface-variant                          */
  --text-faint:  #76777d;    /* captions, counts, disabled                  */
  --text-strong: #000000;    /* headings and field labels                   */

  /* --- accent: one blue for action, selection and focus ------------------- */
  --accent:      #0051d5;
  --accent-hi:   #0046b8;
  --accent-soft: rgba(0, 81, 213, .08);
  --accent-line: rgba(0, 81, 213, .38);
  --on-accent:   #ffffff;

  /* --- status ------------------------------------------------------------- */
  --ok:          #146c43;
  --ok-soft:     #e3f4ea;
  --ok-line:     rgba(20, 108, 67, .28);
  --danger:      #ba1a1a;
  --danger-hi:   #93000a;
  --danger-soft: #ffdad6;
  --danger-line: rgba(186, 26, 26, .28);
  --on-danger:   #ffffff;

  /* --- overlays: drawn on top of imagery, where the theme cannot reach ---- */
  --scrim:    rgba(0, 0, 0, .60);
  --on-scrim: #ffffff;
  --thumb-bg: #e0e3e5;

  /* --- scrollbars --------------------------------------------------------- */
  --scroll-thumb:       #cbd5e1;
  --scroll-thumb-hover: #94a3b8;

  /* --- spacing: 4px base --------------------------------------------------- */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 20px;  --s6: 24px;  --s7: 32px;  --s8: 40px;

  /* --- radii: the reference is deliberately tight -------------------------- */
  --r-xs:   2px;    /* inputs and buttons — the workhorse                    */
  --r-sm:   4px;
  --r:      8px;    /* cards and panels                                      */
  --r-lg:   12px;
  --r-pill: 999px;

  /* --- elevation ----------------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(16, 24, 40, .05);
  --sh-2: 0 1px 3px rgba(16, 24, 40, .10), 0 1px 2px rgba(16, 24, 40, .06);
  --sh-3: 0 10px 15px -3px rgba(16, 24, 40, .10), 0 4px 6px -4px rgba(16, 24, 40, .10);
  /* The sheet is white on a near-white workspace: only the shadow separates
     them, so it is the strongest thing on the screen. */
  --sh-paper: 0 20px 25px -5px rgba(16, 24, 40, .13), 0 8px 10px -6px rgba(16, 24, 40, .12);

  /* --- focus: one ring, everywhere ----------------------------------------- */
  --ring: 0 0 0 3px var(--accent-soft);

  /* --- type ---------------------------------------------------------------- */
  --ui-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
             'Helvetica Neue', sans-serif;
  --ui-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --fs-xs:  11px;   /* label-sm: counts, tallies, captions                   */
  --fs-sm:  12px;   /* label-md: field labels, section headers               */
  --fs-md:  14px;   /* body-sm: the working size                             */
  --fs-lg:  16px;   /* body-md: inputs — also stops iOS zooming on focus     */
  --fs-xl:  20px;   /* headline-sm                                           */
  --fs-2xl: 24px;   /* headline-md                                           */

  --lh-tight:  1.3;
  --lh-normal: 1.5;

  /* --- control metrics -------------------------------------------------------
     Inputs and buttons are sized here rather than in each component, so the
     dashboard, the editor panel and the account forms line up exactly. */
  --ctl-py: 10px;   --ctl-px: 12px;    /* text inputs and selects            */
  --btn-py: 9px;    --btn-px: 16px;    /* buttons                            */
  --gap-inline: 6px;                   /* icon-to-label inside a control     */

  /* --- metrics -------------------------------------------------------------- */
  --appbar-h:  64px;
  --panel-w:   450px;    /* live width; shell.js overwrites it on drag        */
  --panel-min: 320px;
  --panel-max: 680px;
  --toolbar-h: 48px;
  --container: 1280px;

  /* --- motion --------------------------------------------------------------- */
  --ease:  cubic-bezier(.4, 0, .2, 1);
  --out:   cubic-bezier(.16, 1, .3, 1);
  --fast:  .14s var(--ease);
  --mid:   .22s var(--ease);
  --slow:  .32s var(--out);
}

/* Honour the system setting. Every transition here is decoration. */
@media (prefers-reduced-motion: reduce) {
  :root { --fast: 0s; --mid: 0s; --slow: 0s; }
  *, *::before, *::after { animation-duration: .001s !important; }
}