/* ============================================================================
   tiocs-tokens.css — TIOCS Design Tokens (MkDocs integration layer)
   All CSS custom properties. Single source of truth for the theme.
   Ported from New-Theme/colors_and_type.css — the canonical design system.

   Light "Papyrus" theme is the default (:root).
   MkDocs Material palette selectors wire light/dark to Material's switcher.
   ============================================================================ */

/* ── Base tokens — Light theme "Papyrus" (default) ────────────────────────── */
:root,
[data-md-color-scheme="default"],
[data-tiocs-theme="light"] {

    /* Backgrounds */
    --tiocs-bg-primary:        #faf8f4;   /* warm off-white — page */
    --tiocs-bg-secondary:      #f1ebe3;   /* parchment — cards, code, blockquote */
    --tiocs-bg-glass:          rgba(250, 248, 244, 0.88); /* header/tabs backdrop */

    /* Text */
    --tiocs-text-primary:      #3d342a;   /* rich brown — body */
    --tiocs-text-secondary:    #5a4d3f;   /* medium brown — headings, secondary */

    /* Accent gold — organic bronze, the single accent */
    --tiocs-accent-gold:       #8b6f47;
    --tiocs-accent-gold-bright:#a68248;   /* hover/active variant */
    --tiocs-accent-gold-glow:  rgba(139, 111, 71, 0.20);
    --tiocs-gold-shadow:       0 0 15px rgba(139, 111, 71, 0.25);

    /* Semantic foreground aliases */
    --fg1:       var(--tiocs-text-primary);
    --fg2:       var(--tiocs-text-secondary);
    --fg-muted:  #7a6a55;
    --fg-accent: var(--tiocs-accent-gold);

    /* Semantic background aliases */
    --bg1:       var(--tiocs-bg-primary);
    --bg2:       var(--tiocs-bg-secondary);
    --bg-elev:   #ffffff;

    /* Lines & rules */
    --line:      var(--tiocs-accent-gold);
    --line-soft: rgba(139, 111, 71, 0.35);
    --line-hair: rgba(61, 52, 42, 0.12);

    /* Typography — families */
    --font-display:       'Cinzel', 'Trajan Pro', 'Cormorant Garamond', serif;
    --font-body:          'Judson', 'EB Garamond', Georgia, serif;
    --font-mono:          'Roboto Mono', 'JetBrains Mono', ui-monospace, Menlo, monospace;

    /* Legacy aliases used by tiocs.css and tiocs-overrides.css */
    --tiocs-font-body:           var(--font-body);
    --tiocs-font-display:        var(--font-display);
    --tiocs-line-height-base:    var(--lh-body);
    --tiocs-line-height-heading: var(--lh-snug);
    --tiocs-paragraph-spacing:   1.4rem;

    /* Typography — scale (modular, ~1.25) */
    --fs-xs:   0.78rem;    /* 12.5px */
    --fs-sm:   0.875rem;   /* 14px   */
    --fs-base: 1rem;       /* 16px   */
    --fs-md:   1.125rem;   /* 18px   */
    --fs-lg:   1.35rem;    /* 21.6px */
    --fs-xl:   1.75rem;    /* 28px   */
    --fs-2xl:  2.25rem;    /* 36px   */
    --fs-3xl:  2.85rem;    /* 45.6px */
    --fs-4xl:  3.6rem;     /* 57.6px */

    /* Tracking — Cinzel benefits from real letter-spacing */
    --tracking-tight:   -0.01em;
    --tracking-normal:  0;
    --tracking-wide:    0.08em;
    --tracking-wider:   0.16em;
    --tracking-widest:  0.22em;

    /* Line heights */
    --lh-tight: 1.18;
    --lh-snug:  1.3;
    --lh-body:  1.7;       /* long-form reading */
    --lh-loose: 1.85;

    /* Spacing scale (8pt grid, 4pt steps) */
    --sp-0: 0;
    --sp-1: 0.25rem;    /* 4px  */
    --sp-2: 0.5rem;     /* 8px  */
    --sp-3: 0.75rem;    /* 12px */
    --sp-4: 1rem;       /* 16px */
    --sp-5: 1.5rem;     /* 24px */
    --sp-6: 2rem;       /* 32px */
    --sp-7: 3rem;       /* 48px */
    --sp-8: 4rem;       /* 64px */
    --sp-9: 6rem;       /* 96px */

    /* Radii — TIOCS skews sharp; reserved use of curvature */
    --radius-none: 0;
    --radius-sm:   2px;
    --radius-md:   4px;
    --radius-lg:   8px;
    --radius-pill: 999px;

    /* Shadows — paper, not glassy */
    --shadow-sm:   0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:   0 4px 8px var(--tiocs-accent-gold-glow);
    --shadow-lg:   0 12px 32px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
    --shadow-glow: 0 0 15px var(--tiocs-accent-gold-glow);

    /* Content widths */
    --measure-prose: 70ch;    /* ~800px optimal reading */
    --measure-wide:  92ch;

    /* Motion */
    --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-firm: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast:  140ms;
    --dur-med:   240ms;
    --dur-slow:  400ms;
}

/* ── Dark theme "Earth tones at night" ─────────────────────────────────────── */
[data-md-color-scheme="slate"],
[data-tiocs-theme="dark"] {

    /* Backgrounds */
    --tiocs-bg-primary:        #1c1814;
    --tiocs-bg-secondary:      #2a241f;
    --tiocs-bg-glass:          rgba(28, 24, 20, 0.85);

    /* Text */
    --tiocs-text-primary:      #ede3d0;
    --tiocs-text-secondary:    #d4c4a8;

    /* Accent gold — softer in dark context */
    --tiocs-accent-gold:       #b8956f;
    --tiocs-accent-gold-bright:#d4a96a;
    --tiocs-accent-gold-glow:  rgba(184, 149, 111, 0.25);
    --tiocs-gold-shadow:       0 0 15px rgba(184, 149, 111, 0.30);

    /* Semantic foreground aliases */
    --fg-muted:  #a89478;

    /* Semantic background aliases */
    --bg-elev:   #332b23;

    /* Lines & rules */
    --line-soft: rgba(184, 149, 111, 0.40);
    --line-hair: rgba(237, 227, 208, 0.12);

    /* Shadows adjust for dark context */
    --shadow-sm:   0 1px 2px rgba(0,0,0,0.15);
    --shadow-lg:   0 12px 32px rgba(0,0,0,0.30), 0 2px 6px rgba(0,0,0,0.15);
}