/*
 * Pwn2Gether design tokens — THE WALL AND THE RECORD (2026-10-25 redesign),
 * MATRIX PASS 2026-10-26 (captain ruling): the wall goes phosphor —
 * green-black surfaces, green-tinted ink, phosphor accent. Semantic hues
 * (states, channels, categories, emblems) keep their rare bright colors —
 * the movie's grammar: color is signal in a green world.
 * Direction: .claude/plans/frontend-redesign/direction.md
 * Ledger validated by ops/design/validate_palette.py (binding; keep green).
 * Law: every color is a token. Zero orphan hexes in any sheet — hover
 * tints included. If a value is not here, it does not exist.
 */

:root {
  /* -- surfaces: the phosphor ladder, one job per step ------------------ */
  --s-void: #050806;      /* page canvas — the wall behind the rack        */
  --s-pit: #091009;       /* wells: code, masts, meter tracks, log tapes   */
  --s-panel: #0c1710;     /* annunciator dock, modals, admin, dash units   */
  --s-card: #101e15;      /* kanban cards, inputs — the contrast reference */
  --s-card-hi: #142519;   /* card hover / keyed row                        */
  --s-ridge: #1b3222;     /* raised chrome: active tabs, drag, popovers    */
  --scrim: rgba(3, 6, 4, 0.72);

  /* -- the record: dark paper set (LEGAL ONLY inside artifact components;
        stylelint forbids these outside .artifact — see direction law 1).
        Captain ruling 2026-10-25: NO light surfaces anywhere — the record
        renders dark like the wall; names keep the paper-* lineage so the
        location law and stylelint rule stay untouched) -- */
  --paper: #0d1a12;
  --paper-well: #122117;
  --paper-ink: #dff2e2;
  --paper-muted: #9cc3a5;
  --paper-faint: #74997e;
  --paper-rule: #1f3628;

  /* -- text: phosphor ink on the green wall (ratios validator-verified) -- */
  --text-max: #e4f8e7;    /* 15.5:1 — numerals, titles, watch              */
  --text-body: #bfe8c6;   /* 12.8:1 — prose: threads, notes, descriptions  */
  --text-label: #8ab795;  /*  7.6:1 — labels, masts, meta, timestamps      */
  --text-faint: #5c8768;  /*  4.2:1 — decorative only; NEVER body          */
  --text-ink: #04130a;    /* on lit lamp fills and accent fills            */
  --ink-on-yellow: #1c1400;
  --ink-on-paper-accent: #a03060;

  /* -- interaction accent: the trace you can touch (phosphor) ----------- */
  --sig: #34ff77;         /* links, focus, needles, primary controls       */
  --sig-dim: rgba(52, 255, 119, 0.14);
  --sig-bright: #5cff96;  /* hover tint                                    */
  --sig-fill: #0a5629;    /* filled buttons; --text-max rides on it        */
  --sig-fill-hi: #0c6631; /* filled-button hover step                      */
  --submit-hover: #ffffff; /* the human gate brightens to full white       */

  /* -- event emblem hues (muted identity tints; service contract 1..5) --- */
  --emblem-1: #7dd3e8;
  --emblem-1-dim: rgba(125, 211, 232, 0.4);
  --emblem-1-wash: rgba(125, 211, 232, 0.08);
  --emblem-2: #9cfce6;
  --emblem-2-dim: rgba(156, 252, 230, 0.4);
  --emblem-2-wash: rgba(156, 252, 230, 0.08);
  --emblem-3: #ffd23f;
  --emblem-3-dim: rgba(255, 210, 63, 0.4);
  --emblem-3-wash: rgba(255, 210, 63, 0.08);
  --emblem-4: #b7a5ff;
  --emblem-4-dim: rgba(183, 165, 255, 0.4);
  --emblem-4-wash: rgba(183, 165, 255, 0.08);
  --emblem-5: #f49ab1;
  --emblem-5-dim: rgba(244, 154, 177, 0.4);
  --emblem-5-wash: rgba(244, 154, 177, 0.08);

  /* -- status hues (state only; icon + label always, never color alone) - */
  --st-good: #25bd82;
  --st-info: #9ecbff;
  --st-warn: #ffd23f;     /* THE yellow — one value in the whole system    */
  --st-serious: #f43f6e;
  --st-good-dim: rgba(37, 189, 130, 0.14);
  --st-info-dim: rgba(158, 203, 255, 0.14);
  --st-warn-dim: rgba(255, 210, 63, 0.14);
  --st-serious-dim: rgba(244, 63, 110, 0.13);

  /* -- kanban channel hues (validated; claimed is validator-searched) --- */
  --ch-backlog: #a8a294;  /* unlit — achromatic BY DESIGN                  */
  --ch-claimed: #9cfce6;  /* light mint                                   */
  --ch-stuck: #ffd23f;    /* = the yellow                                 */
  --ch-captured: #f97316; /* awaiting the human                           */
  --ch-solved: #25bd82;   /* = good                                       */
  --ch-writeup: #9b7dff;  /* archived to record                           */
  --ch-backlog-dim: rgba(168, 162, 148, 0.14);
  --ch-claimed-dim: rgba(156, 252, 230, 0.13);
  --ch-stuck-dim: rgba(255, 210, 63, 0.14);
  --ch-captured-dim: rgba(249, 115, 22, 0.14);
  --ch-solved-dim: rgba(37, 189, 130, 0.14);
  --ch-writeup-dim: rgba(155, 125, 255, 0.14);

  /* -- category hues (identity chips; always paired with the name) ------ */
  --cat-pwn: #ff7a70;
  --cat-web: #4d9ffe;
  --cat-crypto: #c4b5ff;
  --cat-rev: #ffd23f;     /* shares THE yellow; chip shape differs         */
  --cat-rev-dim: rgba(255, 210, 63, 0.14);  /* same value as st-warn-dim */
  --cat-forensics: #25bd82;
  --cat-misc: #97a3b5;
  --cat-stego: #d84fc0;
  --cat-pwn-dim: rgba(255, 122, 112, 0.13);
  --cat-web-dim: rgba(77, 159, 254, 0.13);
  --cat-crypto-dim: rgba(196, 181, 255, 0.13);
  --cat-forensics-dim: rgba(37, 189, 130, 0.13);
  --cat-misc-dim: rgba(151, 163, 181, 0.13);
  --cat-stego-dim: rgba(216, 79, 192, 0.13);

  /* -- brand: mark + opt-in rain ONLY, never chrome --------------------- */
  --brand-green: #2ee58a;
  --brand-green-dim: rgba(46, 229, 138, 0.14);

  /* -- type scale: mono is structure, 12px is the floor ----------------- */
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Source Serif 4", Georgia, serif;
  --t-display-hero: 56px;   /* landing masthead, watch wordmark            */
  --t-display-1: 40px;      /* event mast, auth headlines                  */
  --t-display-2: 28px;      /* section masts, dash titles                  */
  --t-title-lg: 20px;       /* modal titles, admin heads                   */
  --t-title: 17px;          /* card modal header                           */
  --t-body: 14px;           /* body default                                */
  --t-ui: 13px;             /* controls, buttons, table cells              */
  --t-meta: 12px;           /* THE FLOOR — timestamps, counts, masts       */
  --t-display-hero-lh: 1.04;
  --t-display-1-lh: 1.08;
  --t-display-2-lh: 1.15;
  --t-title-lg-lh: 1.3;
  --t-title-lh: 1.35;
  --t-body-lh: 1.55;
  --t-ui-lh: 1.45;
  --t-meta-lh: 1.5;

  /* -- spacing: 4px pitch, nothing off-scale ---------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --rail-h: 48px;
  --subrail-h: 40px;

  /* -- radius: machined, not molded ------------------------------------- */
  --r-chamfer: 2px;   /* cards, chips, buttons, inputs, tables            */
  --r-panel: 4px;     /* modals, dock, toasts, result chits                */
  --r-lamp: 999px;    /* status dots, badges — circles only                */

  /* -- lines carry structure, shadows carry almost nothing -------------- */
  --line: #243829;
  --line-soft: #1a2a20;
  --line-tick: #2d4534;
  --border-color: var(--line);        /* legacy name, see shim below       */
  --border-soft: var(--line-soft);
  --focus-ring: 0 0 0 1px var(--sig), 0 0 0 3px var(--s-void); /* double-line */
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.55);
  --shadow-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --shadow-artifact: 0 1px 0 rgba(0, 0, 0, 0.35), 0 16px 40px rgba(8, 5, 2, 0.55);
  --shadow-lift: 0 24px 64px rgba(8, 5, 2, 0.6);
  --press: inset 0 1px 2px rgba(36, 29, 18, 0.4);
  --lamp-glow: 0 0 8px;   /* prefix only: `var(--lamp-glow) <hue>`        */

  /* -- motion: physical, never bounce ---------------------------------- */
  --t-tick: 80ms;      /* lamp flip, tick                                 */
  --t-fast: 140ms;     /* hover, focus                                    */
  --t-settle: 320ms;   /* card seat, panel drop, digit roll               */
  --t-sweep: 900ms;    /* needle travel, hue cross-fade                   */
  --dur-4: 640ms;      /* ceremony: the submit stamp, rationed by law     */
  --ease-snap: cubic-bezier(0.2, 0, 0.38, 1);
  --ease-needle: cubic-bezier(0.34, 1.3, 0.5, 1);  /* the signature curve */
  --ease-thud: cubic-bezier(0.34, 1.4, 0.5, 1);    /* stamp landing       */
  --ease-drawer: cubic-bezier(0.16, 1, 0.3, 1);    /* dock/drawer reveals */
  --ease-drift: cubic-bezier(0.45, 0.05, 0.55, 0.95); /* ambient only     */
  --c-breathe: 6s;
  --c-sweep: 12s;
  --c-scan: 24s;
  --c-seal: 24s;       /* registration seal rotation                      */
  --c-attention: 2.4s; /* dots, fresh-dot                                 */
}

/* Watch boosts the scale; never a second scale. Watch doubles cycles.
   The boost ladder is FLUID: the wall's masthead is sized for ~1920+ screens,
   and fixed-px tokens stacked the row into a wrap-mess at 1440 (Playwright
   frontcheck 2026-10-25). Between the floor and the design ceiling the
   ladder tracks the viewport, so the masthead fits at every width and reads
   at full size on the screens it was drawn for. --t-meta stays fixed: it is
   the legibility floor. */
.watch-boost {
  --t-display-hero: clamp(40px, 4vw, 78px);
  --t-display-1: clamp(28px, 3.4vw, 56px);
  --t-display-2: clamp(20px, 2.35vw, 39px);
  --t-title-lg: clamp(16px, 1.7vw, 28px);
  --t-title: clamp(15px, 1.45vw, 24px);
  --t-body: clamp(14px, 1.2vw, 20px);
  --t-ui: clamp(15px, 1.18vw, 18px);
  --t-meta: 17px;
  --c-breathe: 12s;
  --c-sweep: 24s;
  --c-scan: 48s;
}

/* High-contrast/forced-colors: structure via system colors. */
@media (forced-colors: active) {
  :root {
    --line: CanvasText;
    --line-soft: CanvasText;
    --text-max: CanvasText;
    --text-body: CanvasText;
    --text-label: GrayText;
  }
}