/*
 * Design tokens for DecayStats.
 *
 * Typography: Fraunces (variable serif, optical sizes) for display + headlines,
 * Inter (variable grotesk) for body and UI, JetBrains Mono for code / series_ids
 * / numeric provenance. All three self-hosted from /static/fonts/.
 *
 * Color: warm off-white background, near-black text, one deep ink-blue accent.
 * Charts and data viz use the grayscale ramp with the single accent for the
 * highlighted series. No additional palette.
 *
 * Scale: typographic scale is geometric-ish (1.25 ratio) with custom display
 * sizes for hero numbers. Spacing is on a 4px base; line-height is generous
 * for editorial register.
 */

:root {
  /* ---- Color ---------------------------------------------------- */
  --color-bg:               #FAFAF7;   /* warm off-white, not pure FFF */
  --color-bg-elevated:      #FFFFFF;   /* card / inset surfaces */
  --color-bg-sunken:        #F2F1EC;   /* recessed surfaces, code blocks */
  --color-ink:              #0F0F0E;   /* near-black body text */
  --color-ink-muted:        #4A4A48;   /* secondary text */
  --color-ink-subtle:       #7A7A77;   /* tertiary / metadata */
  --color-rule:             #DCDBD3;   /* hairlines, dividers */
  --color-rule-strong:      #B8B7AF;   /* emphasized rules */
  --color-accent:           #0F2A6B;   /* deep ink blue — links, highlights */
  --color-accent-hover:     #1A3B85;
  --color-accent-soft:      #E4E8F2;   /* accent at 10% for backgrounds */

  /* Chart palette: grayscale ramp + single accent for highlighted series. */
  --chart-1:                #0F0F0E;
  --chart-2:                #4A4A48;
  --chart-3:                #7A7A77;
  --chart-4:                #B8B7AF;
  --chart-5:                #DCDBD3;
  --chart-highlight:        var(--color-accent);

  /* ---- Typography ---------------------------------------------- */
  --font-serif:  "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "Helvetica Neue", Arial, sans-serif;
  --font-mono:   "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Type scale. Headlines and display use the serif (Fraunces); body and UI
   * use the sans (Inter). Display sizes lean large — editorial register. */
  --text-xs:        0.75rem;    /* 12px — metadata, labels */
  --text-sm:        0.875rem;   /* 14px — captions, footnotes */
  --text-base:      1.0625rem;  /* 17px — body */
  --text-lg:        1.25rem;    /* 20px — emphasized body / lead */
  --text-xl:        1.5rem;     /* 24px */
  --text-2xl:       2rem;       /* 32px — section headers */
  --text-3xl:       2.75rem;    /* 44px */
  --text-4xl:       3.75rem;    /* 60px */
  --text-display:   5.5rem;     /* 88px — page hero */
  --text-monument:  8.5rem;     /* 136px — the headline number */

  /* Line heights tuned for editorial reading. */
  --leading-tight:    1.1;      /* display + headlines */
  --leading-snug:     1.25;
  --leading-normal:   1.55;     /* body */
  --leading-relaxed:  1.7;      /* long-form prose */

  /* Tracking. Display sizes get tighter tracking; body stays neutral. */
  --tracking-monument: -0.035em;
  --tracking-display:  -0.025em;
  --tracking-headline: -0.015em;
  --tracking-body:      0;
  --tracking-label:     0.06em;    /* uppercase eyebrow labels */
  --tracking-mono:     -0.005em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Spacing (4px base) -------------------------------------- */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.5rem;    /* 24px */
  --space-6:   2rem;      /* 32px */
  --space-7:   3rem;      /* 48px */
  --space-8:   4rem;      /* 64px */
  --space-9:   6rem;      /* 96px */
  --space-10:  8rem;      /* 128px */
  --space-11: 12rem;      /* 192px */

  /* ---- Layout -------------------------------------------------- */
  --measure-prose:   62ch;   /* optimal reading measure */
  --measure-wide:    78ch;
  --container-narrow: 720px;
  --container-text:   880px;
  --container-page:  1180px;
  --container-wide:  1440px;
  --gutter:           clamp(1.25rem, 4vw, 3rem);

  /* ---- Borders & radii ----------------------------------------- */
  --rule-hair:    1px solid var(--color-rule);
  --rule-strong:  1px solid var(--color-rule-strong);
  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-lg:    8px;

  /* ---- Motion -------------------------------------------------- */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:    120ms;
  --duration-base:    200ms;
  --duration-slow:    400ms;

  /* ---- Elevation ----------------------------------------------- */
  /* Used sparingly — Swiss design avoids drop-shadow soup. */
  --shadow-card:    0 1px 2px rgba(15, 15, 14, 0.04),
                    0 4px 16px rgba(15, 15, 14, 0.04);
  --shadow-lift:    0 2px 4px rgba(15, 15, 14, 0.06),
                    0 12px 32px rgba(15, 15, 14, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}