/* Design tokens. Single source of truth for the brand kit.
   See docs/DESIGN_SYSTEM.md for color/typography rationale. */

:root {
    /* ---- Brand palette ---- */
    --color-cosmos:      #080D1A;   /* deep navy-black, hero / footer ground */
    --color-sacred-gold: #C9A84C;   /* primary accent, headlines, key data */
    --color-sterling:    #A8B5BD;   /* secondary text, metadata */
    --color-cipher:      #00B8A9;   /* interactive, links, civic CTAs */

    /* ---- Neutrals derived from the brand for long-form readability ---- */
    --color-paper:     #F8F5EE;     /* warm cream, body bg */
    --color-fog:       #F2EDE2;     /* slightly darker than paper, cards */
    --color-ink:       #1A1F2B;     /* body text, slightly warm vs pure black */
    --color-ink-muted: #4A5260;     /* secondary text */
    --color-rule:      #E2DDD0;     /* subtle borders / hairlines */

    /* ---- Semantic ---- */
    --color-bg:       var(--color-paper);
    --color-fg:       var(--color-ink);
    --color-fg-muted: var(--color-ink-muted);

    /* ---- Status (used semantically only — not decoratively) ---- */
    --color-success: #2E8B57;
    --color-warning: #C8862E;
    --color-danger:  #B14545;
    --color-info:    #5074A6;

    /* ---- Typography ---- */
    --font-display: 'Cinzel', Georgia, 'Times New Roman', serif;
    --font-data:    'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --font-body:    'Exo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    --text-xs:   0.75rem;       /* 12 */
    --text-sm:   0.875rem;      /* 14 */
    --text-base: 1.0625rem;     /* 17 — body */
    --text-lg:   1.25rem;       /* 20 — lead paragraph */
    --text-xl:   1.5rem;        /* 24 */
    --text-2xl:  2rem;          /* 32 */
    --text-3xl:  2.75rem;       /* 44 */
    --text-4xl:  3.75rem;       /* 60 — hero h1 */

    --leading-tight: 1.2;
    --leading-base:  1.65;      /* body */
    --leading-loose: 1.8;

    --tracking-tight:    -0.01em;
    --tracking-normal:   0;
    --tracking-wide:     0.02em;
    --tracking-wider:    0.05em;
    --tracking-display: -0.005em;

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

    /* ---- Layout ---- */
    --width-page:    1200px;    /* outer max */
    --width-article:  720px;    /* optimal reading column */
    --width-sidebar:  320px;
    --gutter:        var(--space-3);

    /* ---- Other ---- */
    --radius-sm: 4px;
    --radius:    8px;
    --radius-lg: 12px;

    --shadow-sm: 0 1px 2px rgba(8, 13, 26, 0.04);
    --shadow:    0 4px 12px rgba(8, 13, 26, 0.06);
    --shadow-lg: 0 12px 32px rgba(8, 13, 26, 0.10);

    --bp-mobile: 768px;
}