/* Hallmark · genre: atmospheric · macrostructure: Workbench (app) + LoRD-homage (marketing) · designed-as-app */
/*
  The one source of truth for every visual value in Legend of the Ashen Dragon.
  Pages consume these by var(--token), never raw values.
  Alpha variants of a colour are derived at the call site with color-mix():
    color-mix(in oklab, var(--color-ember), transparent 55%)
  so there is exactly one ember, one gold, one rule, in exactly one place.
*/
:root{
  /* ── locked palette ─────────────────────────────── */
  --color-paper:      oklch(15% 0.015 55);   /* near-black warm brown — the canvas */
  --color-paper-2:    oklch(20% 0.02 55);    /* raised panel */
  --color-paper-3:    oklch(24% 0.025 55);   /* highest elevation: buttons, wells */
  --color-ink:        oklch(90% 0.02 80);    /* warm parchment */
  --color-ink-2:      oklch(65% 0.02 70);    /* muted */
  --color-faint:      oklch(47% 0.02 65);    /* whispers, footer small print */
  --color-rule:       oklch(30% 0.02 55);    /* hairline / panel edge */
  --color-rule-2:     oklch(38% 0.03 55);    /* lit edge — hover borders */
  --color-ember:      oklch(60% 0.17 40);    /* THE accent. torchlight. <=5% of any viewport */
  --color-ember-strong: oklch(66% 0.18 40);  /* ember, hover-bright */
  --color-ember-deep:   oklch(45% 0.14 40);  /* coal — gradient base, pressed states */
  --color-gold:       oklch(75% 0.13 85);    /* treasure, panel headers, champions */
  --color-blood:      oklch(55% 0.2 25);     /* monsters, damage, the live dot */
  --color-vitae:      oklch(70% 0.15 150);   /* hit points, healing, success */
  --color-focus:      oklch(72% 0.16 40);    /* ember-derived ring, >=3:1 on paper */
  --color-accent-ink: oklch(18% 0.03 50);    /* text sitting on an ember fill */

  /* ── named derivations (so no page ever inlines a raw value) ────────── */
  --color-bone:       oklch(93% 0.02 85);    /* brightest parchment — <b>, sheet values */
  --color-brass:      oklch(58% 0.07 80);    /* dimmed gold — kickers, rank numerals */
  --color-name:       oklch(78% 0.1 210);    /* ANSI cyan — a person's name (LoGD vocabulary) */
  --color-magic:      oklch(68% 0.13 310);   /* ANSI violet — enchantments, gems, the uncanny */
  --color-inset:      oklch(12% 0.012 55);   /* darkest wells: meter beds, log panes, footers */
  --color-bloom:      oklch(24% 0.04 55);    /* the warm bloom at the top of the canvas */
  --color-head-hi:    oklch(26% 0.035 55);   /* panel-header gradient, lit end */
  --color-head-lo:    oklch(19% 0.025 55);   /* panel-header gradient, shaded end */
  --color-row-hover:  oklch(24% 0.03 55);    /* row/rung hover wash */
  --color-cta-hi:     oklch(45% 0.14 38);    /* CTA gradient, lit end */
  --color-cta-lo:     oklch(32% 0.11 38);    /* CTA gradient, shaded end */
  --color-vitae-deep: oklch(48% 0.11 150);   /* hp meter, cold end */
  --color-ember-fade: oklch(42% 0.1 45);     /* xp meter, cold end */
  --color-blood-deep: oklch(38% 0.13 25);    /* monster meter / death bars, cold end */
  --color-gold-deep:  oklch(52% 0.09 80);    /* gold bars, cold end */
  --shade-line:       oklch(0% 0 0 / 0.16);  /* scanline striation over the canvas */

  /* ── typography ─────────────────────────────────────────────────────── */
  --font-display: 'Pirata One', Georgia, serif;             /* blackletter — the LoRD identity */
  --font-body:    system-ui, -apple-system, 'Segoe UI', Verdana, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'Courier New', monospace;

  --text-xs:   0.75rem;

  /* ── spacing — 4pt scale, named. Pages use var(--space-*), never raw rem ── */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-xl:  3rem;

  /* ── motion — motion-cut: transform + opacity only, named easings ───── */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);   /* meter fills */
  --dur-fast:  120ms;
  --dur-med:   400ms;

  /* ── shape ──────────────────────────────────────────────────────────── */
  --radius-sm:   5px;    /* meters, house buttons */
  --radius-md:   7px;    /* buttons, inputs */
  --radius-card: 10px;   /* panels, cards */
  --radius-pill: 999px;

}