/* =========================================================================
   Destiny — design tokens

   Pasted verbatim from the Destiny Design System, §2. This file is the source
   of truth for colour, type, spacing, radius, layout and motion. Nothing
   downstream hardcodes a hex value, and every padding, margin, gap and radius
   in the app is one of the --space-* / --radius-* tokens below, all divisible
   by four.
   ========================================================================= */

:root {
  /* ---- Color: warm greige base (paper) ---- */
  --paper:        #ECE6DB;  /* app background */
  --paper-raised: #FCF9F0;  /* inputs, cards, raised surfaces (lighter than paper) */
  --paper-sunken: #DED7CB;  /* message bubbles, wells (darker than paper) */

  /* ---- Color: text (two warm darks, no gray-blue) ---- */
  --ink:       #17130B;  /* primary: wordmark, headings, UI, buttons */
  --ink-soft:  #5D574D;  /* medium: sub-labels, secondary UI */
  --ink-faint: #948A7B;  /* muted: placeholders, meta labels, inactive nav */
  --coffee:    #33261B;  /* espresso: the reading + body copy; also a dark feature ground */

  /* ---- Color: lines + inverse ---- */
  --line:    #D3CDC1;  /* hairline dividers, borders */
  --on-dark: #F1EADB;  /* cream text on --ink / --coffee surfaces */

  /* ---- Type ---- */
  --font-title:   "Bricolage Grotesque", "Familjen Grotesk", system-ui, sans-serif; /* titles */
  --font-display: "IM Fell English", Georgia, serif;         /* the fortune's own voice */
  --font-ui:      "Familjen Grotesk", system-ui, sans-serif;  /* interface + body */
  --font-mono:    "Fragment Mono", ui-monospace, monospace;   /* meta labels + the ASCII field */

  /* Titles are the wordmark and the omen, and only those. The fortune keeps
     the antique serif: it is the voice speaking, not a label on a screen, and
     a grotesque reads as an interface rather than as someone talking. */
  --weight-title: 600;

  /* ---- Color: the ASCII field ----
     One brown ramp, espresso through to tan. The field cycles through it, so
     these are four stops of one colour rather than four colours. */
  --ascii-1: #33261B;
  --ascii-2: #6B4A2F;
  --ascii-3: #9A7048;
  --ascii-4: #4A3524;

  /* The field's master strength. Each level scales off this (see .ascii__art
     in app.css), so the cup's walls land near 0.65 and the faintest steam near
     0.19: strong enough that the cup reads as a cup, quiet enough that a
     fortune set over it keeps its contrast. The paper grain sits at 0.04. */
  --ascii-opacity: 0.31;

  --text-xs:  0.80rem;  /* meta labels (mono) */
  --text-sm:  0.90rem;  /* captions, secondary */
  --text-base:1.00rem;  /* body */
  --text-md:  1.25rem;
  --text-lg:  1.563rem;
  --text-xl:  1.953rem;
  --text-2xl: 2.441rem;
  --text-3xl: 3.052rem;  /* reveal / wordmark */

  /* ---- Spacing: 4px grid (every value divisible by 4) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ---- Radius: 4px grid (every value divisible by 4) ---- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;  /* buttons, inputs */
  --radius-lg:   16px;  /* cards */
  --radius-xl:   24px;  /* sheets, large surfaces */
  --radius-pill: 999px; /* chips, follow-up bar */

  /* ---- Layout ---- */
  --container: 640px;  /* max reading width */
  --tap-min:   44px;   /* min touch target */

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   160ms;
  --dur-base:   240ms;
  --dur-slow:   480ms;
  --dur-ritual: 2600ms; /* the reading wait */
}

/* Optional derived night theme. The reference is light-only, so these are extrapolated. */
[data-theme="dark"] {
  --paper:        #16130E;
  --paper-raised: #211D16;
  --paper-sunken: #100D09;
  --ink:          #ECE8E0;
  --ink-soft:     #ABA69C;
  --ink-faint:    #7C766C;
  --coffee:       #D8C3A8;  /* espresso reads as warm tan on dark for body text */
  --line:         #2C2820;
  --on-dark:      #F1EADB;

  /* The ramp lifts on dark paper: espresso on near-black is invisible, and an
     invisible field is one that costs a paint and buys nothing. */
  --ascii-1: #6B4A2F;
  --ascii-2: #9A7048;
  --ascii-3: #C09A6B;
  --ascii-4: #7C5636;
  --ascii-opacity: 0.36;
}