/* ══════════════════════════════════════════════════════════════════════════
   Thaisky-Digital brand theme — Nocturne token overrides.

   Loaded AFTER the design system and BEFORE site.css, so the vendored
   _ds/.../styles.css stays byte-identical to the imported original and a
   future design re-sync can overwrite it without losing the brand.

   Sampled from the company mark (000/assets/images/td-122x121.jpg):
     black   #030303   the ground
     red     #e40a0a   the disc          → OKLCH L 0.579  C 0.234  H 29
     gold    #eaba06   the "TD" letters  → OKLCH L 0.809  C 0.165  H 90
     white   #ffffff   the wordmark

   The web yellow is #fffc00 by choice, not the sampled #eaba06: brighter
   and greener than the printed mark (L 0.962 against 0.809), which is what
   carries it on a near-black screen — 18:1 against the ground where the
   sampled gold managed 9.8:1.

   Both ramps are generated in OKLCH on Nocturne's own shared lightness
   scale (L 0.971 → 0.290) with its own chroma curve, so a step of the gold
   ramp carries the same visual weight as the same step of the red or the
   neutral one — the property the system depends on. The logo red lands on
   step 600 and the logo gold on step 400 of their scales, which is why
   those two steps are the ones the page reaches for as brand marks.

   Role split — the logo's own structure, kept at page scale:
     yellow (--color-accent)    the figure: links, kickers, focus, outlines
     red    (--color-accent-2)  the field:  marks, bars, glows, active fills
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --color-bg: #100907;        /* warm near-black — L 0.150, not the logo's pure black */
  --color-surface: #1d1513;   /* L 0.205 */
  --color-text: #efede5;      /* warm white — 16.8:1 on the ground */
  --color-accent: #fffc00;    /* brand yellow — 18.0:1 on the ground */
  --color-accent-2: #e21610;  /* red-600      — the logo red, 4.1:1 */
  --color-divider: color-mix(in srgb, #efede5 16%, transparent);

  /* Neutrals — the same scale, rotated warm (H 60→40) so greys sit with the
     ground rather than against it. */
  --color-neutral-100: #f7f5f3;
  --color-neutral-200: #ede7e3;
  --color-neutral-300: #ddd2cb;
  --color-neutral-400: #c6b3a8;
  --color-neutral-500: #a89388;
  --color-neutral-600: #8a756b;
  --color-neutral-700: #6a5952;
  --color-neutral-800: #4c3f3a;
  --color-neutral-900: #312a27;

  /* Accent — the brand yellow's own hue (H 109→84 across the ramp; the dark
     steps drift toward gold so they read brown rather than olive).

     #fffc00 sits at OKLCH L 0.962 — above step 100 of the shared scale — so
     unlike the red, the brand color is not one of its own ramp steps. The
     ramp carries the tints and fills; the pure yellow is used directly,
     via --color-accent, wherever the brand color itself should show. */
  --color-accent-100: #f6f7e6;
  --color-accent-200: #ecebc4;
  --color-accent-300: #e0d78a;
  --color-accent-400: #d1b800;
  --color-accent-500: #b19700;
  --color-accent-600: #927800;
  --color-accent-700: #735a00;
  --color-accent-800: #543f00;
  --color-accent-900: #3a2800;

  /* Accent-2 — the brand red (H 36→25). Unlike stock Nocturne, this is a
     real second role, not a machine-derived stand-in: the logo carries two
     colors and the page uses both. Step 500 is the orange the disc fades
     through; step 600 is the disc itself. */
  --color-accent-2-100: #fff2ef;
  --color-accent-2-200: #ffe0d9;
  --color-accent-2-300: #ffc4b7;
  --color-accent-2-400: #ff9782;
  --color-accent-2-500: #ff553f;
  --color-accent-2-600: #e21610;
  --color-accent-2-700: #b00a11;
  --color-accent-2-800: #7f0910;
  --color-accent-2-900: #4e1514;

  /* Section ground — kept in the family: a deep red-black rather than
     Nocturne's indigo. */
  --color-section: #3a0f0c;
  --color-section-glow: #5c1712;
  --color-section-ghost: #7d2a22;

  /* Elevation — re-derived from the warmer neutrals and a darker ground,
     so the ambient shade goes deeper than stock Nocturne's. */
  --shadow-sm: 0 0 0 1px #4c3f3a;
  --shadow-md: 0 0 0 1px #6a5952, 0 6px 18px rgba(0,0,0,0.62);
  --shadow-lg: 0 0 0 1px #a89388, 0 16px 40px rgba(0,0,0,0.72);
}