/*
Design System Tokens

This file defines `--ds-*` tokens. It should NOT change existing UI by itself.
All values mirror the current UI (or UA defaults) and can be referenced from
base/components/page CSS using `var(--ds-...)` with safe fallbacks.

Theme files (loaded via `frontend_theme_css`) may override colors, but should
avoid overriding typography scale tokens unless that was already done.
*/

:root {
    /* Colors (map to existing theme variables). */
    --ds-color-bg: var(--bg);
    --ds-color-surface: var(--surface);
    --ds-color-surface-1: var(--surface-1);
    --ds-color-border: var(--border);
    --ds-color-text: var(--text);
    --ds-color-muted: var(--muted);
    --ds-color-ink: var(--ink);
    --ds-color-accent: var(--accent);
    --ds-color-accent-2: var(--accent-2);
    --ds-color-accent-3: var(--accent-3);
    --ds-color-danger: var(--danger);

    /* Spacing (generic scale). */
    --ds-space-0: 0px;
    --ds-space-1: 4px;
    --ds-space-2: 8px;
    --ds-space-3: 12px;
    --ds-space-4: 16px;
    --ds-space-5: 20px;
    --ds-space-6: 24px;
    --ds-space-7: 28px;
    --ds-space-8: 32px;
    --ds-space-9: 40px;
    --ds-space-10: 48px;
    --ds-space-11: 56px;
    --ds-space-12: 64px;

    /* Radius (map to current theme). */
    --ds-radius-sm: 8px;
    --ds-radius-md: 12px;
    --ds-radius-lg: 16px;
    --ds-radius-xl: 24px;
    --ds-radius-2xl: 30px;
    --ds-radius-pill: 999px;

    /* Shadows (map to current theme). */
    --ds-shadow-soft: var(--shadow-soft);
    --ds-shadow-lift: var(--shadow-lift);
    --ds-shadow-deep: var(--shadow-deep);
    --ds-glow: var(--glow);

    /* Z-index (coarse scale). */
    --ds-z-base: 0;
    --ds-z-sticky: 10;
    --ds-z-nav: 50;
    --ds-z-overlay: 1500;
    --ds-z-modal: 2000;

    /* Typography families. */
    --ds-font-body: 'Sora', 'Space Grotesk', sans-serif;
    --ds-font-display: 'Space Grotesk', 'Sora', sans-serif;
    --ds-font-size-adjust: 0.52;

    /*
    Public typography aliases (Phase-7).

    These provide stable, non-`--ds-*` token names for templates/page CSS to use.
    Values are chosen to be safe by default (UA-equivalent scale), while also
    exposing "Home-canonical" references that page CSS can opt into without
    requiring value rewrites.
    */
    --font-family-base: var(--ds-font-body, 'Sora', 'Space Grotesk', sans-serif);
    /* Default heading family matches current default (inherit from body). */
    --font-family-heading: var(--ds-font-body, 'Sora', 'Space Grotesk', sans-serif);
    /* Display/hero family (used by home hero + project hero, etc.). */
    --font-family-display: var(--ds-font-display, 'Space Grotesk', 'Sora', sans-serif);
    --font-weight-heading: 800;

    /* Typography scale (UA-equivalent defaults to avoid regressions). */
    --ds-body-size: 1rem;
    --ds-body-line: 1.6;
    --ds-h1-size: 2em;
    --ds-h2-size: 1.5em;
    --ds-h3-size: 1.17em;
    --ds-h4-size: 1em;
    --ds-h5-size: 0.83em;
    --ds-h6-size: 0.67em;
    --ds-heading-tracking: -0.02em;

    /* Phase-7 canonical token names (defaults remain UA-equivalent). */
    --font-size-body: var(--ds-body-size, 1rem);
    --line-height-body: var(--ds-body-line, 1.6);

    --font-size-h1: var(--ds-h1-size, 2em);
    --font-size-h2: var(--ds-h2-size, 1.5em);
    --font-size-h3: var(--ds-h3-size, 1.17em);
    --font-size-h4: var(--ds-h4-size, 1em);
    --font-size-h5: var(--ds-h5-size, 0.83em);
    --font-size-h6: var(--ds-h6-size, 0.67em);

    /* Keep defaults "normal" so loading typography base cannot shift layout. */
    --line-height-h1: normal;
    --line-height-h2: normal;
    --line-height-h3: normal;
    --line-height-h4: normal;
    --line-height-h5: normal;
    --line-height-h6: normal;

    --letter-spacing-h1: normal;
    --letter-spacing-h2: normal;
    --letter-spacing-h3: normal;
    --letter-spacing-h4: normal;
    --letter-spacing-h5: normal;
    --letter-spacing-h6: normal;

    /*
    Home-canonical typography references (do not apply globally by default).
    These mirror the current Home page "truth" values.
    */
    --type-home-hero-h1-size: var(--ds-type-home-hero-h1, clamp(2.6rem, 5vw, 4.4rem));
    --type-home-hero-h1-line: 1.08;
    --type-home-hero-h1-letter: 0.04em;
    --type-home-hero-h1-font: var(--font-family-display);
    --type-home-hero-h1-transform: uppercase;

    /* Used by home section strip headings (home.css: --home-heading-size, etc.). */
    --type-home-section-heading-size: clamp(1.55rem, 2.2vw, 2.1rem);
    --type-home-section-heading-weight: 800;
    --type-home-section-heading-letter: 0.02em;
    --type-home-section-heading-line: 1.2;
    --type-home-section-heading-font: 'Sora', sans-serif;

    /* Canonical sizes captured from current UI patterns. */
    --ds-type-project-hero-h1: clamp(2rem, 3.5vw, 2.6rem);
    --ds-type-static-hero-h1: clamp(1.8rem, 3vw, 2.6rem);
    --ds-type-static-content-h2: clamp(1.2rem, 2vw, 1.6rem);
    --ds-type-static-inquiry-h3: clamp(1.05rem, 1.6vw, 1.35rem);

    /* Home hero display typography (current UI). */
    --ds-type-home-hero-h1: clamp(2.6rem, 5vw, 4.4rem);
    --ds-type-home-hero-p: clamp(1rem, 1.8vw, 1.3rem);
}