/* ============================================================================
   tokens.css — PM System foundation
   ----------------------------------------------------------------------------
   Loaded BEFORE style.css. Nothing in this file is app-specific: it is the
   reset, the token set, the base element styles, and the four primitives every
   screen is built from (button, field, badge, panel).

   Direction: a restrained operational instrument.
   ONE gray family (neutral graphite, ~6% cool cast). Colour appears only where
   it carries meaning:
       green  = complete / healthy / running
       amber  = waiting / caution / held
       red    = fault / destructive / urgent
       blue   = links and the keyboard focus ring. Nothing else.
   The primary action is a light neutral, not a colour. 60% surface / 30%
   secondary surface + text / 10% accent, and the accent is mostly semantic.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. reset */

*, *::before, *::after { box-sizing: border-box; }

html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote,
dl, dd, ul, ol, fieldset, legend, pre { margin: 0; padding: 0; }

ul[class], ol[class] { list-style: none; }

img, svg, video, canvas { display: block; max-width: 100%; }

button, input, select, textarea {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}

button { background: none; border: none; }

table { border-collapse: collapse; border-spacing: 0; }

fieldset { border: 0; }

/* ------------------------------------------------------------- 2. tokens */

:root {
    /* --- graphite ladder: the ONE gray family -------------------------- */
    --g-1000: #0B0C0E;   /* deepest — rail, sidebar, sticky chrome         */
    --g-950:  #101216;   /* app canvas                                     */
    --g-900:  #15181C;   /* recessed wells, inputs                         */
    --g-850:  #1A1E23;   /* panel / card                                   */
    --g-800:  #21262C;   /* raised row, secondary button                   */
    --g-750:  #282E35;   /* hover                                          */
    --g-700:  #313841;   /* active / pressed                               */
    --g-600:  #3D454F;   /* strong border, disabled fill                   */
    --g-500:  #545D68;   /* faint text, dividers on light surfaces         */
    --g-400:  #7D848C;   /* muted text          — 4.9:1 on canvas          */
    --g-300:  #A0A6AD;   /* secondary text      — 7.6:1 on canvas          */
    --g-200:  #C4C9CF;
    --g-100:  #DDE0E4;
    --g-50:   #E8EAED;   /* primary text        — 14:1 on canvas           */

    /* --- surfaces ------------------------------------------------------ */
    --surface-app:      var(--g-950);
    --surface-rail:     var(--g-1000);
    --surface-panel:    var(--g-850);
    --surface-raised:   var(--g-800);
    --surface-sunken:   var(--g-900);
    --surface-hover:    var(--g-750);
    --surface-active:   var(--g-700);

    /* --- text ---------------------------------------------------------- */
    --text-primary:   var(--g-50);
    --text-secondary: var(--g-300);
    --text-muted:     var(--g-400);
    --text-faint:     var(--g-500);
    --text-inverse:   #14171A;

    /* --- lines --------------------------------------------------------- */
    --line-subtle: rgba(255,255,255,.055);   /* row separators            */
    --line:        rgba(255,255,255,.09);    /* default border            */
    --line-strong: rgba(255,255,255,.16);    /* input border, emphasis    */

    /* --- semantic: green = complete / healthy / running -----------------
       *-text is for glyphs on a dark surface; *-fill is a button ground
       that carries *-on text; *-line and *-soft are the hairline + wash. */
    --green-text:   #5FB37A;                 /* 7.3:1 on canvas           */
    --green-fill:   #3A7D55;
    --green-fill-h: #45905F;
    --green-fill-a: #33704B;
    --green-on:     #F2F7F3;                 /* 5.7:1 on --green-fill     */
    --green-line:   rgba(95,179,122,.34);
    --green-soft:   rgba(95,179,122,.11);

    /* --- semantic: amber = waiting / caution / held --------------------- */
    --amber-text:   #D9A441;                 /* 8.2:1 on canvas           */
    --amber-fill:   #8E6A1C;
    --amber-fill-h: #A47B23;
    --amber-fill-a: #7A5A16;
    --amber-on:     #FBF6EA;
    --amber-line:   rgba(217,164,65,.32);
    --amber-soft:   rgba(217,164,65,.10);

    /* --- semantic: red = fault / destructive / urgent ------------------- */
    --red-text:   #E06C6C;                   /* 5.8:1 on canvas           */
    --red-fill:   #B4423F;
    --red-fill-h: #C64B47;
    --red-fill-a: #9E3835;
    --red-on:     #FDF2F2;                   /* 5.5:1 on --red-fill       */
    --red-line:   rgba(224,108,108,.34);
    --red-soft:   rgba(224,108,108,.10);

    /* --- blue: LINKS AND FOCUS ONLY. Do not paint surfaces with this. --- */
    --link:       #6E9FD4;                   /* 6.7:1 on canvas           */
    --link-hover: #8FB8E4;
    --focus:      #7FB2E8;

    /* --- selection: neutral, not blue ---------------------------------- */
    --select-bg:  rgba(232,234,237,.16);

    /* --- typography ---------------------------------------------------- */
    --font-sans: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system,
                 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'Cascadia Mono', Consolas, 'Segoe UI Mono', ui-monospace,
                 'Courier New', monospace;

    /* 1.125 Major Second, rounded to whole px so glyphs stay crisp.
       Body never below 14. Labels never below 12. */
    --fs-200: 12px;   /* micro label, badge, kbd                          */
    --fs-300: 13px;   /* dense table cell, metadata                       */
    --fs-400: 14px;   /* body — base                                      */
    --fs-500: 16px;   /* lead, section title                              */
    --fs-600: 18px;   /* page section heading                             */
    --fs-700: 20px;   /* page title                                       */
    --fs-800: 22px;   /* stat numeral                                     */
    --fs-900: 26px;   /* hero numeral, timer                              */

    --lh-ui:     1.1;    /* buttons, pills, labels                        */
    --lh-tight:  1.2;    /* headings, numerals                            */
    --lh-snug:   1.4;    /* dense UI text, table cells                    */
    --lh-normal: 1.55;   /* prose, descriptions                           */

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-strong:  600;

    --ls-caps:  .085em;  /* uppercase needs air or it reads as a wall     */
    --ls-tight: -.01em;  /* 20px+ headings                                */

    /* --- spacing: 4px rhythm, no off-grid values ----------------------- */
    --sp-0:  0;
    --sp-05: 2px;
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-10: 40px;
    --sp-12: 48px;

    /* --- radius: three, plus the pill shape ---------------------------- */
    --r-sm:   4px;    /* chips, inputs, small controls                    */
    --r-md:   6px;    /* buttons, rows, inner blocks                      */
    --r-lg:   10px;   /* panels, cards, modal                             */
    --r-pill: 999px;

    /* --- elevation: three levels. On dark, lift with SURFACE first and
           use shadow only to separate a floating layer from the page. --- */
    --sh-1: 0 1px 2px rgba(0,0,0,.40);
    --sh-2: 0 4px 12px rgba(0,0,0,.45);
    --sh-3: 0 16px 40px rgba(0,0,0,.55);

    /* --- controls ------------------------------------------------------ */
    --ctl-h-sm: 28px;
    --ctl-h:    34px;   /* standard desktop control                       */
    --ctl-h-lg: 44px;   /* gloved-hand targets: workstation actions       */

    /* --- layout -------------------------------------------------------- */
    --sidebar-w:           250px;
    --sidebar-w-collapsed: 56px;

    /* --- motion -------------------------------------------------------- */
    --dur-fast: .12s;
    --dur:      .16s;
    --ease:     cubic-bezier(.4, 0, .2, 1);

    /* --- z ------------------------------------------------------------- */
    --z-sticky: 20;
    --z-rail:   100;
    --z-pop:    300;
    --z-modal:  1000;
    --z-toast:  2000;
    --z-banner: 9000;

    /* --- LEGACY ALIASES -------------------------------------------------
       `static/js/app.js` writes 560 inline style="" attributes, ~157 of which
       read the old variable names. app.js is owned by the Wave-3 frontend
       agents, so those reads must keep resolving until the inline-style sweep
       lands (reports/gauntlet-r8/design-handoff-inline-styles.md).
       Every alias points at a NEW token — nothing here reintroduces a value.
       Delete this block once the sweep is done. -------------------------- */
    --bg-primary:    var(--surface-app);
    --content-bg:    var(--surface-app);
    --bg-secondary:  var(--surface-raised);
    --card-bg:       var(--surface-panel);
    --bg-elevated:   var(--surface-hover);
    --bg-hover:      var(--surface-hover);
    --sidebar-bg:    var(--surface-rail);
    --sidebar-hover: var(--surface-raised);
    --sidebar-active:var(--surface-active);
    --border:        var(--line);
    --border-color:  var(--line);
    --text-light:    var(--text-muted);
    --primary:       var(--link);          /* only ever used for link text  */
    --primary-hover: var(--link-hover);
    --success:       var(--green-text);
    --warning:       var(--amber-text);
    --danger:        var(--red-text);
    --info:          var(--text-secondary);
    --radius:        var(--r-lg);
    --shadow:        var(--sh-1);
    --shadow-md:     var(--sh-2);
    --xp-gold:       var(--amber-text);
    --xp-gold-bg:    var(--amber-soft);
    --streak-orange: var(--amber-text);
}

/* --------------------------------------------------------- 3. base layer */

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-sans);
    font-size: var(--fs-400);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--text-primary);
    background: var(--surface-app);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--fw-strong);
    line-height: var(--lh-tight);
    color: var(--text-primary);
}
h1 { font-size: var(--fs-700); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-600); letter-spacing: var(--ls-tight); }
h3 { font-size: var(--fs-500); }
h4 { font-size: var(--fs-400); }
h5, h6 { font-size: var(--fs-300); }

p { line-height: var(--lh-normal); }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

code, pre, kbd, samp { font-family: var(--font-mono); }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-4) 0; }

strong, b { font-weight: var(--fw-strong); }

::selection { background: var(--select-bg); color: var(--text-primary); }

/* Scrollbars stay inside the theme — bright native chrome slices a dark UI. */
* { scrollbar-width: thin; scrollbar-color: var(--g-700) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--g-700); border-radius: var(--r-pill);
    border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--g-600); background-clip: content-box; }

/* ---------------------------------------------------- 4. focus, globally */
/* Keyboard focus must be visible on EVERY interactive element. Pointer
   interaction never draws it. This is the only place blue paints a surface. */

:focus { outline: none; }

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[onclick]:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

/* Inputs draw the ring on the border box, not offset — offset clips inside
   scrolling panels. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.form-control:focus-visible {
    outline-offset: 0;
    border-color: var(--focus);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------- 5. type utils */

.u-label {
    font-size: var(--fs-200);
    font-weight: var(--fw-medium);
    line-height: var(--lh-ui);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--text-muted);
}
.u-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.u-num  { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
          letter-spacing: var(--ls-tight); }
.u-dim  { color: var(--text-secondary); }
.u-faint{ color: var(--text-muted); }

/* --------------------------------------------------------- 6. primitives */

/* --- 6a. buttons ---------------------------------------------------------
   One box model for every variant so a row of mixed buttons has no optical
   step. Full state coverage: rest / hover / active / disabled / focus. */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--ctl-h);
    padding: 0 var(--sp-3);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: var(--surface-raised);
    color: var(--text-primary);
    font-size: var(--fs-300);
    font-weight: var(--fw-medium);
    line-height: var(--lh-ui);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}
.btn:hover  { background: var(--surface-hover); }
.btn:active { background: var(--surface-active); }
.btn:disabled,
.btn[disabled],
.btn.is-disabled {
    background: var(--g-900);
    color: var(--text-faint);
    border-color: transparent;
    cursor: not-allowed;
    opacity: .55;
}

/* Primary = the light neutral. High contrast, no colour, unmistakable. */
.btn-primary {
    background: var(--g-100);
    color: var(--text-inverse);
    font-weight: var(--fw-strong);
    border-color: transparent;
}
.btn-primary:hover  { background: var(--g-50); }
.btn-primary:active { background: var(--g-200); }
.btn-primary:disabled, .btn-primary[disabled] {
    background: var(--g-600); color: var(--g-400); opacity: 1;
}

/* Secondary = quiet outline on the panel. */
.btn-secondary {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--line-strong);
}
.btn-secondary:hover  { background: var(--surface-raised); color: var(--text-primary); }
.btn-secondary:active { background: var(--surface-hover); }

/* Semantic variants — used only where the word matches the meaning. */
.btn-success { background: var(--green-fill); color: var(--green-on); font-weight: var(--fw-strong); }
.btn-success:hover  { background: var(--green-fill-h); }
.btn-success:active { background: var(--green-fill-a); }

.btn-warning { background: var(--amber-fill); color: var(--amber-on); font-weight: var(--fw-strong); }
.btn-warning:hover  { background: var(--amber-fill-h); }
.btn-warning:active { background: var(--amber-fill-a); }

.btn-danger { background: var(--red-fill); color: var(--red-on); font-weight: var(--fw-strong); }
.btn-danger:hover  { background: var(--red-fill-h); }
.btn-danger:active { background: var(--red-fill-a); }

/* Destructive actions REST neutral — a permanent alarm-red in a primary row
   pulls the eye to 'destroy' on every record. Colour arrives on intent. */
.btn-quiet-danger { background: transparent; color: var(--text-secondary);
    border-color: var(--line-strong); }
.btn-quiet-danger:hover { background: var(--red-soft); border-color: var(--red-line);
    color: var(--red-text); }

.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--surface-raised); color: var(--text-primary); }

.btn-sm   { min-height: var(--ctl-h-sm); padding: 0 var(--sp-2); font-size: var(--fs-200); }
.btn-lg   { min-height: var(--ctl-h-lg); padding: 0 var(--sp-5); font-size: var(--fs-400); }
.btn-icon { min-height: var(--ctl-h); width: var(--ctl-h); padding: 0; }
.btn-block{ width: 100%; }

/* --- 6b. fields ----------------------------------------------------------
   ONE definition. The old file overrode .form-control four times with four
   different border alphas; there is now nothing to override. */

.form-group { margin-bottom: var(--sp-4); }

.form-group > label,
.field-label {
    display: block;
    margin-bottom: var(--sp-1);
    font-size: var(--fs-200);
    font-weight: var(--fw-medium);
    line-height: var(--lh-ui);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--text-muted);
}

.form-control {
    display: block;
    width: 100%;
    min-height: var(--ctl-h);
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface-sunken);
    color: var(--text-primary);
    font-size: var(--fs-400);
    line-height: var(--lh-snug);
    transition: border-color var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease);
}
.form-control::placeholder { color: var(--text-faint); }
.form-control:hover:not(:disabled) { border-color: var(--g-600); }
.form-control:focus { outline: none; border-color: var(--focus); background: var(--g-900); }
.form-control:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.form-control:disabled,
.form-control[disabled] {
    background: var(--g-900);
    border-color: var(--line);
    color: var(--text-muted);
    cursor: default;
}
.form-control[readonly] { background: var(--g-900); color: var(--text-secondary); }

textarea.form-control { min-height: 72px; padding-top: var(--sp-2);
    padding-bottom: var(--sp-2); resize: vertical; line-height: var(--lh-normal); }
select.form-control { appearance: auto; padding-right: var(--sp-2); }
input[type="time"].form-control,
input[type="date"].form-control { font-family: var(--font-mono); }
.form-control.is-invalid { border-color: var(--red-line); background: var(--red-soft); }

.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.form-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.form-help  { margin-top: var(--sp-05); font-size: var(--fs-200); color: var(--text-muted); }
.form-error { margin-top: var(--sp-1); font-size: var(--fs-200); color: var(--red-text); }

input[type="checkbox"], input[type="radio"] {
    width: 16px; height: 16px; accent-color: var(--g-200); cursor: pointer;
}

/* --- 6c. panel -----------------------------------------------------------
   Elevation on dark comes from a lighter surface, not a bigger shadow. */

.panel {
    background: var(--surface-panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}
.panel-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-300);
    font-weight: var(--fw-strong);
    color: var(--text-primary);
}
.panel-body { padding: var(--sp-4); }

/* --- 6d. badge -----------------------------------------------------------
   Dark-native: a tinted wash, a hairline, and coloured text. Never a bright
   pastel chip. Default is neutral — colour is opt-in via a status class. */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-05) var(--sp-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: rgba(255,255,255,.05);
    color: var(--text-secondary);
    font-size: var(--fs-200);
    font-weight: var(--fw-medium);
    line-height: 18px;
    letter-spacing: .01em;
    white-space: nowrap;
}
.badge-neutral { background: rgba(255,255,255,.05); border-color: var(--line);
    color: var(--text-secondary); }
.badge-ok      { background: var(--green-soft); border-color: var(--green-line);
    color: var(--green-text); }
.badge-warn    { background: var(--amber-soft); border-color: var(--amber-line);
    color: var(--amber-text); }
.badge-bad     { background: var(--red-soft);  border-color: var(--red-line);
    color: var(--red-text); }
.badge-quiet   { background: transparent; border-color: var(--line);
    color: var(--text-muted); }

/* --- 6e. keyboard hint --------------------------------------------------- */

kbd, .kbd {
    display: inline-block;
    padding: 0 var(--sp-1);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: rgba(255,255,255,.05);
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: var(--fs-200);
    font-weight: var(--fw-medium);
    line-height: 17px;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}