/* ==========================================================================
   Design tokens
   Palette source: design_references/6899c4b9d0751abcf305a823_6.svg
     ALABASTER #E9E2DA · COQUELICOT #FF4329 · PURE BLACK #000000
   Every value below is mixed only toward those three colors plus white,
   so nothing outside the brand palette is ever introduced.

   CONTRAST RULE (measured, WCAG 2.x relative luminance):
     #FF4329 on #E9E2DA = 2.69:1  -> FAILS normal text (4.5), large text (3.0)
                                     AND non-text UI contrast (3.0).
   Therefore coquelicot is split into three role-locked tokens. Read the
   comment on each before using it. Do not substitute one for another.
   ========================================================================== */

:root {
  /* ---- Surfaces ---------------------------------------------------- */
  --bg-page:        #E9E2DA;  /* ALABASTER — the brand ground           */
  --bg-paper:       #F1EDE8;  /* raised: cards, badges, panel head      */
  --bg-sunken:      #DDD7CF;
  --row-hover:      #DDD7CF;
  --row-selected:   #D2CBC4;

  /* ---- Rules & borders --------------------------------------------- */
  /* Decorative only. 1.31:1 — intentionally near-invisible, matching the
     reference. Never use for anything a user must perceive as a control. */
  --hairline:        #CDC7C0;
  --hairline-strong: #B6B0AA;
  /* Interactive boundaries (selects, inputs, buttons, the close circle).
     3.22:1 — the SC 1.4.11 floor. The reference fails this; we don't. */
  --border-control:  #807C78;

  /* ---- Ink ---------------------------------------------------------- */
  --ink:          #000000;  /* 16.36:1 on page — strongest pair we have  */
  --ink-2:        #413F3D;  /*  8.16:1 — descriptors, captions           */
  --ink-3:        #4E4842;  /*  7.02:1 — muted metadata                  */
  --ink-disabled: #807C78;  /*  3.22:1 — non-text use only               */

  /* ---- Accent, split by role (see CONTRAST RULE above) --------------- */
  /* FILLS, graphics, and rules >=3px only. Always pair with BLACK text
     on top (6.09:1). Never white (3.45) and never alabaster (2.69). */
  --accent:         #FF4329;
  /* The ONLY accent permitted for large type on light surfaces
     (>=24px regular / >=18.66px bold). 3.59:1 on page. */
  --accent-display: #D93923;
  /* The ONLY accent permitted at body size, and ONLY on the bone,
     alabaster, and ember-1 washes. 4.93:1 on page. */
  --accent-text:    #B22F1D;

  /* ---- Per-case-study panel washes ---------------------------------- */
  /* Nine identities from three colors. Black body copy is >=9.8:1 on every
     step except --wash-void, which flips to alabaster text.
     Cool/ash = protected. Ember 1..4 = escalating adversarial intensity.
     Because hue carries meaning here, ALWAYS also print the severity in the
     mono section label and give each case a numeric marker, so the signal
     survives grayscale and color-blind viewing. */
  --wash-bone:     #F1EDE8;  /* 18.02:1 */
  --wash-ash:      #D2CBC4;  /* 13.08:1 */
  --wash-ash-deep: #BAB5AE;  /* 10.31:1 */
  --wash-ember-1:  #EBD5CC;  /* 14.92:1 */
  --wash-ember-2:  #EDC5BA;  /* 13.30:1 */
  --wash-ember-3:  #F0B2A5;  /* 11.62:1 */
  --wash-ember-4:  #F39A8A;  /*  9.80:1 */
  --wash-flare:    #FF4329;  /*  6.09:1, black text only */
  --wash-void:     #000000;  /* 16.36:1, alabaster text only */

  --focus-ring: #000000;

  /* ---- Data marks ---------------------------------------------------
     The stat bands are achromatic on purpose. Measured against the washes,
     coquelicot lands at 1.61:1 (ember-4) to 2.96:1 (bone) — it cannot carry
     a data segment on any light wash, and it survives only on --wash-void.
     So charts use three weights of ink instead: the emphasised quantity
     solid (>=9.80:1 on every wash), the contextual span muted, the empty
     track recessive. Every plotted value is ALSO printed as text, so no
     reading depends on a fill.

     Alpha rather than fixed hex, because these sit on nine different
     grounds; a fixed hairline that reads on alabaster measures 1.00:1 on
     ember-4. The void block below flips them to alabaster alpha. */
  --mark:       var(--ink);
  --mark-muted: rgba(0, 0, 0, .28);
  --mark-track: rgba(0, 0, 0, .09);
  --rule-mark:  rgba(0, 0, 0, .16);

  /* ---- Type --------------------------------------------------------- */
  --font-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont,
               "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo,
               Consolas, monospace;

  /* ---- Layout ------------------------------------------------------- */
  --gutter: clamp(20px, 3vw, 48px);
  --panel-w: clamp(420px, 53vw, 760px);

  /* ---- Motion ------------------------------------------------------- */
  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-accel-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-panel-in: 320ms;
  --dur-panel-out: 220ms;
}

/* Scoped inversion. Not a site-wide dark mode — it is applied only where
   darkness is doing real work: packet dumps, raw ciphertext, the adversary's
   view. On black, coquelicot finally reaches 6.09:1 and becomes legible as
   text, which is the mirror of its light-mode restriction. */
[data-wash="void"],
.is-terminal {
  --bg-page:        #000000;
  --bg-paper:       #10100F;
  --bg-sunken:      #1C1B1A;
  --hairline:       #2F2D2C;
  --hairline-strong:#464441;
  --border-control: #464441;
  --ink:            #E9E2DA;  /* 16.36:1 */
  --ink-2:          #97938E;  /*  6.88:1 */
  --ink-3:          #97938E;
  --accent-display: #FF4329;  /* 6.09:1 — safe for text here */
  --accent-text:    #FF4329;
  --focus-ring:     #E9E2DA;
  /* --mark needs no override: it is var(--ink), and custom properties
     resolve where they are used, so it picks up the alabaster ink above. */
  --mark-muted: rgba(233, 226, 218, .32);
  --mark-track: rgba(233, 226, 218, .12);
  --rule-mark:  rgba(233, 226, 218, .20);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-panel-in: 120ms; --dur-panel-out: 120ms; }
}
