/* ============================================================================
   THE GOLDEN — design tokens.  COPIED VERBATIM from the design handoff.
   Source: design_handoff_the_golden_build/TOKENS.css

   ⚠ DO NOT EDIT THIS FILE BY HAND. It is the design's file, not ours. If a
   value needs to change, it changes in the design and is re-copied. If a value
   you need is MISSING, that is a question for the owner, never a new line here.

   ⚠ Scoped under .gr-root, NOT :root. The app already defines --text, --muted,
   --panel and --pass at :root in beta-style.css with DIFFERENT values — the
   app's --text is #1a1d23 (near-black) against the design's #f1f3f6
   (near-white). Publishing these at :root would invert text across the whole
   existing app. The grader owns its own scope; nothing outside .gr-root sees
   these names.
   ========================================================================= */

.gr-root {

  /* ══ 1. LIGHT ═════════════════════════════════════════════════════════════
     One source: above, 15° left of vertical. Every gradient in the product
     uses this axis; every shadow falls down and 1px right of it. Published as
     a direction, not as a set of one-off shadow values. */

  --lit: 165deg;

  /* ══ 2. COLOUR IS BUILT ON COLOUR TEMPERATURE ═════════════════════════════
     Every colour sits somewhere on the Kelvin scale except one region.
     WARM (tungsten) = action and current position. 3200K is golden hour,
     which is what the curriculum and the product name are both built on.
     COOL (daylight) = information, metadata, counts, structure. Kelvin
     climbs as it recedes; 6500K is D65, the monitor standard, and it is the
     interface white point.
     TRUE NEUTRAL = the stage region only. No temperature at all, the way a
     grading suite is painted, because that is where someone else's colour is
     being judged. */

  /* warm — tungsten */
  --k2700: #b8763a;   /* deep tungsten — pressed, dimmed */
  --k3000: #d19f43;   /* shadow side of the gold gradient */
  --k3200: #f0c66b;   /* THE GOLD — action, current position */
  --k3400: #f7d891;   /* lit side of the gold gradient */
  --k4300: #f5934a;   /* halogen — flagged, needs you, exceptions */
  --k3200-fill: rgba(240, 198, 107, .10);
  --k3200-line: rgba(240, 198, 107, .24);

  /* cool — daylight */
  --k5600:  #9fb6cb;  /* brightest information */
  --k6500:  #dfe3e8;  /* D65 — the interface white point */
  --k7500:  #7e96ad;  /* secondary information */
  --k9000:  #5c7085;  /* labels and units */
  --k12000: #41505e;  /* faint structure */
  --k16000: #1a2027;  /* hairlines */
  --k5600-fill: rgba(126, 150, 173, .075);
  --k5600-line: rgba(126, 150, 173, .20);

  /* true neutral — the stage region ONLY */
  --n-stage:    #2e2e2e;  /* the frame fill */
  --n-surround: #242424;  /* the surround */
  --n-edge:     #3d3d3d;  /* the one hairline */
  --n-mark:     #6e6e6e;  /* frame mark, outside the frame only */
  --n-text:     #c4c4c4;
  --n-dim:      #8f8f8f;
  --n-faint:    #6b6b6b;

  /* signal — OUTSIDE the temperature scale by design.
     Never a surface. Only a 7–9px dot, a 1px ring, or a needle. */
  --pass:      #4ecf95;
  --pass-dim:  #6aa588;
  --fail:      #ff6b7d;
  --fail-dim:  #c0707c;
  --pass-fill: rgba(62, 207, 142, .09);
  --pass-line: rgba(62, 207, 142, .26);
  --fail-fill: rgba(200, 16, 46, .12);
  --fail-line: rgba(200, 16, 46, .40);

  /* text ramp */
  --text:  #f1f3f6;
  --text2: #dfe3e8;
  --text3: #b6b9be;
  --muted: #8b8f96;
  --dim:   #6b6f76;
  --faint: #54585f;

  /* school identity — the only saturated red in the product */
  --mustang: #C8102E;   /* 3px × 12px section rules only, never a fill */

  /* ══ 3. MATERIAL — four classes, nothing else ═════════════════════════════
     Gradient ceiling is 4 L* top to bottom. Past that it stops reading as
     light and starts reading as a graphic. */

  /* 3.1 SUBSTRATE — matte, deepest, no gradient. This is the room. */
  --sub:   #07080a;
  --sub-2: #0b0c0d;
  --sub-3: #0f1113;

  /* 3.2 PANEL — satin, slightly raised. Δ2.6 L* */
  --panel:    linear-gradient(165deg, #1e2023, #191b1e);
  --panel-lo: linear-gradient(165deg, #151719, #121315);
  --panel-hi: linear-gradient(165deg, #26282c, #212328);

  /* 3.3 CONTROL — inset at rest, raised when active. Δ1.9 L* */
  --ctl:    linear-gradient(165deg, #171a1c, #141618);
  --ctl-in: inset 0 1px 2px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.022);
  --ctl-up: linear-gradient(165deg, #292c31, #232529);

  /* 3.4 EMISSIVE — the primary action, and only the primary action. Δ3.8 L* */
  --gold:    linear-gradient(168deg, #f7d891 0%, #efc16b 44%, #d19f43 100%);
  --gold-in: inset 0 1px 0 rgba(255,255,255,.52), inset 0 -1px 0 rgba(108,72,16,.34);
  --bloom:   0 0 16px -3px rgba(240,198,107,.34), 0 0 4px rgba(240,198,107,.16);

  /* ══ 4. EDGE LIGHT — 1px, the highest-return line in the system ═══════════
     A top edge highlight on every raised surface and a darker bottom edge.
     Panels, cards, the active queue row, active controls, the primary button.
     NEVER the stage. */

  --edge:    inset 0 1px 0 rgba(255,255,255,.062);
  --edge-hi: inset 0 1px 0 rgba(255,255,255,.10);
  --edge-un: inset 0 -1px 0 rgba(0,0,0,.44);

  /* ══ 5. SHADOW — two layers. One is a graphic, two is physics ═════════════
     Elements that float over the stage get both. Elements inside a panel get
     contact only. Nothing that does not sit above something gets either. */

  --contact: 0 1px 2px rgba(0,0,0,.52), 0 2px 4px -1px rgba(0,0,0,.34);
  --ambient: 0 20px 44px -18px rgba(0,0,0,.62);
  --float:   0 1px 2px rgba(0,0,0,.52), 0 2px 4px -1px rgba(0,0,0,.34),
             0 20px 44px -18px rgba(0,0,0,.62);

  /* ══ 6. LUMINOSITY — status dots read as small lights, not circles ════════
     This is NOT bloom. Bloom belongs to the primary action alone. */

  --lum-pass: 0 0 5px rgba(78,207,149,.45);
  --lum-gold: 0 0 5px rgba(240,198,107,.48);
  --lum-fail: 0 0 5px rgba(255,107,125,.42);
  --lum-cool: 0 0 5px rgba(126,150,173,.42);

  /* ══ 7. GRAIN — 1.8%, chrome only ═════════════════════════════════════════
     Monochrome fractal noise, 120px tile. It kills banding in the panel
     gradients on a real monitor and buys perceived resolution.
     NEVER over the stage, a photograph, or a waveform. Implemented as an
     absolutely positioned pointer-events:none overlay inside nav, rail and
     score panel — never on the centre column. */

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-opacity: .018;

  /* ══ 8. DEPTH TIERS — contrast and saturation falloff ═════════════════════
     NEAR (stage + the panel I am acting in) = no filter.
     MID  (queue rail) = slightly reduced.
     FAR  (nav bar, outer chrome, ambient labels) = noticeably reduced.
     Never apply a filter to any ancestor of the stage. */

  --near: none;
  --mid:  saturate(.9) contrast(.97);
  --far:  saturate(.72) contrast(.93) brightness(.97);

  /* ══ 9. TYPE — three voices ═══════════════════════════════════════════════ */

  --f-d: 'Archivo', system-ui, sans-serif;        /* display: names, headings */
  --f-u: 'IBM Plex Sans', system-ui, sans-serif;  /* interface: small sizes   */
  --f-n: 'JetBrains Mono', monospace;             /* technical: labels, numbers */

  /* display — optical tracking by size, not one scale applied blindly */
  --t-display-xl:   20px;  --t-display-xl-ls:   -.026em;  /* section heads, 700 */
  --t-display-lg: 16.5px;  --t-display-lg-ls:   -.024em;  /* criterion name, 700 */
  --t-display-md: 15.5px;  --t-display-md-ls:   -.021em;  /* nav title, 700 */
  --t-display-sm:   13px;  --t-display-sm-ls:   -.012em;  /* rail head, 600 */
  --t-display-xs:   12px;  --t-display-xs-ls:   -.014em;  /* row name, 500/700 */

  /* interface — 450 is the body weight; 400 goes thin on the panel */
  --t-ui-lg:   15px;
  --t-ui-md:   13px;   /* body, weight 450 */
  --t-ui-sm: 12.5px;
  --t-ui-xs: 11.5px;   /* weight 450, tracking +.004em */
  --t-ui-xxs:  11px;

  /* technical — caps need the air, so tracking grows as size shrinks */
  --t-mono-lg:  11px;  --t-mono-lg-ls: .06em;
  --t-mono-md: 9.5px;  --t-mono-md-ls: .08em;
  --t-mono-sm:   9px;  --t-mono-sm-ls: .09em;
  --t-mono-xs: 8.5px;  --t-mono-xs-ls: .12em;
  --t-mono-xxs:  8px;  --t-mono-xxs-ls: .11em;

  /* ══ 10. SPACING + RADII ══════════════════════════════════════════════════ */

  --sp-1:  2px;
  --sp-2:  4px;
  --sp-3:  5px;
  --sp-4:  7px;
  --sp-5:  9px;
  --sp-6: 11px;
  --sp-7: 13px;
  --sp-8: 14px;
  --sp-9: 18px;
  --sp-10: 20px;

  --r-xs:  4px;   /* keycap, unit chip */
  --r-sm:  6px;   /* small chip, avatar inner */
  --r-md:  7px;   /* avatar tile, instrument track, suggested line */
  --r-lg:  8px;   /* queue row, tier segment, back-to-queue */
  --r-xl:  9px;   /* rubric level, text field, chip group */
  --r-2xl: 10px;  /* stage frame, primary button */
  --r-3xl: 11px;  /* criterion card, score card */
  --r-4xl: 12px;  /* board card */
  --r-5xl: 14px;  /* the screen shell */

  /* ══ 11. THE FRAME MARK ═══════════════════════════════════════════════════
     Four corner brackets from crop marks and camera framing guides. One
     motif, one meaning: THIS IS THE ACTIVE THING. Never decoration.
     At most one per region — rail, panel, stage — so three on screen is the
     ceiling and one is the norm. */

  --fm-stroke: 1.5px;
  --fm-arm-sm:  6px;   /* tier segment */
  --fm-arm-md:  8px;   /* queue row, rubric level, focused field */
  --fm-arm-lg: 10px;   /* criterion card */
  --fm-arm-xl: 13px;   /* the stage, in the surround */
  --fm-inset:   3px;   /* 4px on cards, 0 / negative on the stage */
  --fm-radius:  2px;
  --fm-color: var(--k3200);        /* everywhere except the stage */
  --fm-color-stage: var(--n-mark); /* outside the frame, true neutral */

  /* ══ 12. MOTION ═══════════════════════════════════════════════════════════
     Nothing loops. Nothing at rest moves. Full table in MOTION.md. */

  --ease-settle:  cubic-bezier(.2, .9, .24, 1.04);  /* expansion, with settle */
  --ease-standard: cubic-bezier(.2, .9, .3, 1);     /* press, raise, advance  */
  --ease-exit:    cubic-bezier(.4, 0, .7, .2);      /* contraction            */
  --ease-drop:    cubic-bezier(.2, 1.3, .5, 1);     /* pin placement only     */
  --ease-error:   cubic-bezier(.3, 0, .2, 1);

  --dur-press:   90ms;
  --dur-fast:   160ms;
  --dur-quick:  180ms;
  --dur-base:   200ms;
  --dur-raise:  220ms;
  --dur-expand: 260ms;
  --dur-drop:   280ms;
  --dur-hold:  1100ms;   /* saved-state hold before returning to rest */
}

/* ============================================================================
   STUDENT SIDE — the same language inverted for daylight.
   Read at arm's length in a lit classroom, so the theme flips; warm still
   carries action and current position, cool still carries information, and
   the region holding the student's own work is STILL true neutral.
   ========================================================================= */

.gr-root--light {
  --lk3200:       #8a6420;   /* warm text and frame marks on light */
  --lk3200-fill:  #fbf2df;
  --lk3200-line:  #e4cd9a;
  --lk3200-solid: #f0c66b;   /* the gold surface, with #241a06 on it */
  --lk4300:       #a85c1e;

  --lk5600:  #3c5a75;
  --lk6500:  #17181a;
  --lk7500:  #5d7488;
  --lk9000:  #7f909e;
  --lk12000: #bcc6cd;
  --lk16000: #e4e8eb;

  --lbg:     #f2f3f4;
  --lcard:   #ffffff;
  --ltext:   #17181a;
  --ltext2:  #3c4045;
  --ltext3:  #5a6067;

  --lpass:      #12855a;
  --lpass-fill: #e8f6ef;
  --lfail:      #c4304a;
  --lfail-fill: #fdeef0;

  /* the student's own work keeps the true-neutral surround */
  --ln-stage:    #2b2b2b;
  --ln-surround: #242424;
  --ln-edge:     #3d3d3d;
  --ln-mark:     #7a7a7a;

  /* light elevation — ink-tinted, not black */
  --l-card-shadow: 0 1px 2px rgba(20,24,28,.08);
  --l-raise:       0 1px 2px rgba(20,24,28,.08), 0 6px 18px -10px rgba(20,24,28,.22);
  --l-inset:       inset 0 1px 3px rgba(20,24,28,.16);
}