/* ============================================================
   Roky — Colour tokens
   Warm, flat, restrained. Ember is the ONLY bright colour and is
   reserved for ROI numbers + the single primary action. Never
   decorative, never a gradient UI fill. Colour richness comes only
   from treated terrain imagery.
   ============================================================ */

:root {
  /* --- Base palette ---------------------------------------- */
  --bone:        #F4EEE3;  /* page background */
  --bone-light:  #FCF9F2;  /* cards / raised surfaces */
  --bone-band:   #EFE8DA;  /* optional alternate-section band */
  --basalt:      #1E1C18;  /* ink + dark bands */
  --ember:       #EA5602;  /* brand + ROI signal — the only bright colour */
  --ember-deep:  #B83D10;  /* hairlines / hover / pressed */
  --loam:        #7A6149;  /* structure / illustration line */
  --slate:       #566872;  /* technical text */
  --sand:        #D8C7A2;  /* warm fill / strata */
  --sage:        #8B9A77;  /* sparing accent */

  /* Tints derived for hairlines & subtle fills (warm, low-sat) */
  --basalt-12:   rgba(30, 28, 24, 0.12);
  --basalt-08:   rgba(30, 28, 24, 0.08);
  --basalt-05:   rgba(30, 28, 24, 0.05);
  --bone-12:     rgba(252, 249, 242, 0.12);
  --bone-30:     rgba(252, 249, 242, 0.30);
  --bone-60:     rgba(252, 249, 242, 0.60);
  --ember-12:    rgba(234, 86, 2, 0.12);

  /* --- Semantic aliases ------------------------------------ */
  /* Surfaces */
  --surface-page:        var(--bone);
  --surface-card:        var(--bone-light);
  --surface-band-alt:    var(--bone-band);
  --surface-dark:        var(--basalt);

  /* Text — on light */
  --text-primary:        var(--basalt);
  --text-secondary:      var(--slate);
  --text-muted:          #8A8175;
  --text-technical:      var(--slate);   /* JetBrains Mono labels */
  --text-on-dark:        var(--bone-light);
  --text-on-dark-muted:  var(--bone-60);

  /* Signal — Ember, reserved */
  --signal:              var(--ember);
  --signal-hover:        var(--ember-deep);

  /* Lines & borders */
  --hairline:            var(--basalt-12);
  --hairline-strong:     var(--basalt);
  --hairline-ember:      var(--ember);
  --hairline-on-dark:    var(--bone-12);

  /* Structure / illustration */
  --line-structure:      var(--loam);
  --fill-strata:         var(--sand);
  --accent-sage:         var(--sage);

  /* ============================================================
     Roky Dark — SECONDARY palette (warm near-black + beige accent).
     Additive: the Bone palette above stays the default. Opt in by
     adding class="roky-dark" or data-theme="dark" on a section/page.
     Warm-black surface ramp (slight brown so it never reads cold),
     beige as the identity accent. Hex are the exact hero values.
     ============================================================ */
  --d-bg-0:        #0E0D0B;  /* page background (hero base) */
  --d-bg-1:        #16130E;  /* cards, raised sections */
  --d-bg-2:        #201B14;  /* elevated surfaces, popovers */
  --d-bg-3:        #2A241B;  /* inputs, hover fills */

  --d-border:        #2C2820;  /* hairlines, dividers (= contour line) */
  --d-border-strong: #3A3429;  /* focused / emphasised borders */

  --d-text-primary:   #EDE6D6;  /* headings, primary copy   ~14:1 AAA */
  --d-text-secondary: #BCA983;  /* body, secondary copy     ~8.7:1 AAA */
  --d-text-muted:     #8A7E68;  /* labels, captions, meta   ~5:1 AA  */
  --d-text-faint:     #5C5544;  /* decorative only — not informational */

  --d-accent:        #C7B493;  /* primary actions, links, active glyphs */
  --d-accent-hover:  #E8DBC0;  /* hover / highlight (hot glyph colour) */
  --d-accent-press:  #A8946F;  /* pressed / active */

  /* Functional — tuned to stay in palette (verify before shipping) */
  --d-success: #8A9A6B;  /* muted olive */
  --d-warning: #C9A24B;  /* amber */
  --d-danger:  #C0654E;  /* terracotta */

  /* Hero-specific */
  --d-glyph:        #BCA983;  /* flowing code (= --d-text-secondary) */
  --d-glyph-hot:    #E8DBC0;  /* highlighted code (= --d-accent-hover) */
  --d-contour-line: rgba(140, 126, 102, 0.16);  /* isoline stroke under the code */
  --d-hero-scrim:   radial-gradient(120% 80% at 28% 50%,
                      rgba(14,13,11,0.74) 0%,
                      rgba(14,13,11,0.32) 42%,
                      rgba(14,13,11,0)    70%);  /* @kind other */

  /* Dark hairline tint mirror */
  --d-border-08: rgba(44, 40, 32, 0.55);
}

/* ------------------------------------------------------------
   Dark scope — remap the SAME semantic roles components already
   consume, so existing components flip to dark with no rewrite.
   The Ember signal is intentionally NOT used on dark; the beige
   --d-accent carries actions (it relies on weight/contrast, not
   colour pop — keep CTAs from leaning on colour here).
   ------------------------------------------------------------ */
.roky-dark,
[data-theme="dark"] {
  --surface-page:        var(--d-bg-0);
  --surface-card:        var(--d-bg-1);
  --surface-band-alt:    var(--d-bg-2);
  --surface-dark:        var(--d-bg-0);

  --text-primary:        var(--d-text-primary);
  --text-secondary:      var(--d-text-secondary);
  --text-muted:          var(--d-text-muted);
  --text-technical:      var(--d-text-muted);
  --text-on-dark:        var(--d-text-primary);
  --text-on-dark-muted:  var(--d-text-secondary);

  /* On dark, the brand accent is beige, not Ember. Ember stays
     available as --signal-ember for the rare ROI number if needed. */
  --signal-ember:        var(--ember);
  --signal:              var(--d-accent);
  --signal-hover:        var(--d-accent-hover);

  --hairline:            var(--d-border);
  --hairline-strong:     var(--d-border-strong);
  --hairline-ember:      var(--d-accent);
  --hairline-on-dark:    var(--d-border);

  --line-structure:      var(--d-text-faint);
  --fill-strata:         var(--d-bg-2);
  --accent-sage:         var(--d-success);

  color: var(--text-primary);
  background-color: var(--surface-page);
}