/**
 * ChronologiaOS Design System Tokens
 * System: Warm Archival Editorial
 * Version: 3.7.0
 * Standard: W3C Design Tokens Community Group specification
 *
 * v3 principles (see /styleguide):
 *  - Warm ink on parchment: brown-black ink instead of neutral black, warm hairlines.
 *  - Flat surfaces: hairline borders carry structure; no elevation stacks.
 *  - Short radius vocabulary: 4 / 8 / 12 / 16 / pill.
 *  - Light display serif: headlines whisper, the accent punctuates (1–2 per viewport).
 *  - Mono is for data (IDs, figures, timestamps) — never for navigation or buttons.
 */

:root {
  /* ==========================================================================
     1. Color Palette
     ========================================================================== */

  /* Surfaces */
  --color-bg-canvas: #FBF8F3;       /* Parchment canvas */
  --color-bg-card: #FFFFFF;         /* Card lifted off the canvas */
  --color-bg-surface: #FFFFFF;
  --color-bg-card-subtle: #F4EFE7;  /* Soft cream secondary layer, hover zones */
  --color-bg-dark: #1F1810;         /* Inset directive surface (warm sepia) */
  --color-bg-dark-elevated: #2B231A;
  --header-bg: rgba(251, 248, 243, 0.88);
  --dock-bg: rgba(251, 248, 243, 0.94);

  /* Ink (all ≥ 4.5:1 on canvas) */
  --color-ink-primary: #1F1810;     /* Sepia ink — headings, primary text */
  --color-ink-secondary: #3A322A;   /* Body copy */
  --color-ink-muted: #5E544A;       /* Captions, secondary notes */
  --color-ink-subtle: #776B60;      /* Meta, timestamps, IDs */
  --color-ink-inverse: #F6F1EA;
  --color-ink-inverse-subtle: #B3A89C;

  /* Accent — vermilion punctuation. Text-safe (4.66:1 on canvas). */
  --color-accent-primary: #C8421F;
  --color-accent-hover: #A93617;
  --color-accent-soft: rgba(200, 66, 31, 0.08);
  --color-accent-glow: rgba(200, 66, 31, 0.18);
  --color-accent-peach: #FAD9C6;    /* Glow halo for primary CTA */
  --color-cta: #3E2407;             /* Chestnut — the only button fill */
  --color-cta-ink: #FBF8F3;

  /* Hairlines */
  --color-border-subtle: #EAE3D9;   /* Default card + divider hairline */
  --color-border-medium: #D9CFC3;   /* Inputs, outline buttons, hover edge */
  --color-border-dark: #1F1810;

  /* Epistemic Status Semantics */
  --color-epistemic-verified: #146C35;
  --color-epistemic-strong: #0369A1;
  --color-epistemic-hypothesis: #7E22CE;
  --color-epistemic-review: #9A4508;
  --color-epistemic-anomaly: #BE123C;

  /* ==========================================================================
     2. Typography System
     ========================================================================== */
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --font-size-2xs: 0.6875rem; /* 11px */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.5rem;    /* 40px */
  --font-size-5xl: 3.5rem;    /* 56px */

  /* Semantic web scale: rem floors preserve reader text scaling. */
  --type-h1: clamp(2.125rem, 1.55rem + 2.3vw, 3.5rem);
  --type-hero: clamp(2.625rem, 1.6rem + 4vw, 4.5rem);
  --type-h2: clamp(1.75rem, 1.3rem + 1.7vw, 2.625rem);
  --type-h3: clamp(1.4375rem, 1.15rem + 1vw, 1.75rem);
  --type-h4: clamp(1.25rem, 1.1rem + .6vw, 1.4375rem);
  --type-h5: clamp(1.125rem, 1rem + .4vw, 1.25rem);
  --type-h6: clamp(1rem, .95rem + .2vw, 1.125rem);
  --type-body: clamp(1rem, .95rem + .2vw, 1.125rem);
  --type-lede: clamp(1.0625rem, .95rem + .45vw, 1.25rem);
  --type-card-title: clamp(1.5rem, 1.35rem + .6vw, 1.875rem);
  --type-meta: .8125rem;
  --type-metric: clamp(2rem, 1.6rem + 2vw, 3.25rem);
  --measure-prose: 68ch;


  /* Serif weights: display whispers, headings hold */
  --weight-display: 400;      /* Hero + page titles, metric numerals */
  --weight-heading: 500;      /* Card & section titles */
  --weight-ui: 500;           /* Nav, buttons, labels (sans) */

  --leading-none: 1;
  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-display: -0.022em;
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.12em;

  /* ==========================================================================
     3. Spatial System (4px base)
     ========================================================================== */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  --section-gap: clamp(3.5rem, 7vw, 5rem);  /* 56–80px between major sections */
  --card-padding: clamp(1.25rem, 2.2vw, 1.75rem);

  /* ==========================================================================
     4. Geometry & Elevation — flat, hairline-led
     ========================================================================== */
  --radius-none: 0px;
  --radius-xs: 4px;     /* Badges, pills-in-text, small chips */
  --radius-sm: 8px;     /* Tags, inputs, inline buttons */
  --radius-md: 12px;    /* Buttons, cards */
  --radius-lg: 16px;    /* Feature panels, media cards */
  --radius-pill: 9999px;

  --shadow-subtle: 0 1px 2px rgba(31, 24, 16, 0.04);
  --shadow-card: 0 1px 2px rgba(31, 24, 16, 0.04);
  --shadow-dock: 0 -1px 0 rgba(31, 24, 16, 0.04);
  --shadow-cta-glow: 0 0 0 4px var(--color-accent-peach);

  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);

  --z-canvas: 1;
  --z-sticky-header: 100;
  --z-modal-backdrop: 500;
  --z-modal-content: 510;
  --z-mobile-dock: 999;

  /* ==========================================================================
     5. Viewport, Safe Area & Touch Ergonomics
     ========================================================================== */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);

  --header-height: 60px;
  --dock-height: 64px;

  --touch-target-min: 44px;
  --touch-target-dock: 48px;

  --focus-ring-color: var(--color-accent-primary);
  --focus-ring-offset: 2px;
  --focus-ring-width: 2px;

  --font-size-hero: clamp(2.2rem, 4.4vw, 3.3rem);
  --font-size-page-title: clamp(2rem, 4.6vw, 3.25rem);
  --font-size-display-lead: clamp(1.1rem, 2.2vw, 1.3rem);

  /* ==========================================================================
     6. Backward-Compatible Aliases
     ========================================================================== */
  --bg: var(--color-bg-canvas);
  --card-bg: var(--color-bg-card);
  --card-subtle-bg: var(--color-bg-card-subtle);
  --ink: var(--color-ink-primary);
  --ink-secondary: var(--color-ink-secondary);
  --ink-muted: var(--color-ink-muted);
  --ink-subtle: var(--color-ink-subtle);
  --accent: var(--color-accent-primary);
  --accent-soft: var(--color-accent-soft);
  --border: var(--color-border-subtle);
  --border-dark: var(--color-border-dark);
  --dark-box-bg: var(--color-bg-dark);
  --dark-box-ink: var(--color-ink-inverse);
}

/* ==========================================================================
   7. Dark Mode — warm lamplit archive (not cool obsidian)
   Kept in one custom-property set and applied by both the explicit
   [data-theme] switch and the no-JS prefers-color-scheme fallback.
   ========================================================================== */
[data-theme="dark"] {
  --color-bg-canvas: #12100D;
  --color-bg-card: #1A1714;
  --color-bg-surface: #1A1714;
  --color-bg-card-subtle: #221E1A;
  --color-bg-dark: #0B0A08;
  --color-bg-dark-elevated: #26211C;

  --color-ink-primary: #F3EEE7;
  --color-ink-secondary: #D6CEC4;
  --color-ink-muted: #A89D91;
  --color-ink-subtle: #AA9C8D;
  --color-ink-inverse: #F3EEE7;      /* Ink on --color-bg-dark, which stays dark */
  --color-ink-inverse-subtle: #A89D91;

  --color-accent-primary: #EC6A45;
  --color-accent-hover: #F4825F;
  --color-accent-soft: rgba(236, 106, 69, 0.12);
  --color-accent-glow: rgba(236, 106, 69, 0.3);
  --color-accent-peach: rgba(236, 106, 69, 0.22);
  --color-cta: #F3EEE7;
  --color-cta-ink: #1F1810;

  --color-border-subtle: #2A2520;
  --color-border-medium: #3B342D;
  --color-border-dark: #F3EEE7;
  --color-epistemic-verified: #72C68F;
  --color-epistemic-strong: #79BFE5;
  --color-epistemic-hypothesis: #C9A0EC;
  --color-epistemic-review: #E8B96B;
  --color-epistemic-anomaly: #F38DA6;

  --shadow-subtle: none;
  --shadow-card: none;
  --shadow-dock: 0 -1px 0 rgba(0, 0, 0, 0.4);

  --header-bg: rgba(18, 16, 13, 0.86);
  --dock-bg: rgba(18, 16, 13, 0.94);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-canvas: #12100D;
    --color-bg-card: #1A1714;
    --color-bg-surface: #1A1714;
    --color-bg-card-subtle: #221E1A;
    --color-bg-dark: #0B0A08;
    --color-bg-dark-elevated: #26211C;

    --color-ink-primary: #F3EEE7;
    --color-ink-secondary: #D6CEC4;
    --color-ink-muted: #A89D91;
    --color-ink-subtle: #AA9C8D;
    --color-ink-inverse: #F3EEE7;
    --color-ink-inverse-subtle: #A89D91;

    --color-accent-primary: #EC6A45;
    --color-accent-hover: #F4825F;
    --color-accent-soft: rgba(236, 106, 69, 0.12);
    --color-accent-glow: rgba(236, 106, 69, 0.3);
    --color-accent-peach: rgba(236, 106, 69, 0.22);
    --color-cta: #F3EEE7;
    --color-cta-ink: #1F1810;

    --color-border-subtle: #2A2520;
    --color-border-medium: #3B342D;
    --color-border-dark: #F3EEE7;
  --color-epistemic-verified: #72C68F;
  --color-epistemic-strong: #79BFE5;
  --color-epistemic-hypothesis: #C9A0EC;
  --color-epistemic-review: #E8B96B;
  --color-epistemic-anomaly: #F38DA6;

    --shadow-subtle: none;
    --shadow-card: none;
    --shadow-dock: 0 -1px 0 rgba(0, 0, 0, 0.4);

    --header-bg: rgba(18, 16, 13, 0.86);
    --dock-bg: rgba(18, 16, 13, 0.94);
  }
}