/* ============================================================
   SHELLS Design-System — Foundation Tokens
   Single source of truth for typography, shadows, gradients,
   transitions, and z-index. Loaded BEFORE colors.css so these
   tokens are available to every downstream stylesheet.
   Some values here reference tokens defined in colors.css
   (e.g. var(--primary-rgb), var(--neutrals-0)). This is safe:
   CSS custom properties resolve at computed-style time, after
   the full cascade is parsed — declaration order does not matter.
   Authority: docs/styleguide/STYLE_GUIDE.md (created in Phase 1 Task 9)
   Spec:      docs/superpowers/specs/2026-04-22-design-system-styleguide-design.md
   ============================================================ */

:root {
    /* ─── Typography Scale ─── */
    --text-xs:   0.75rem;     /* 12px — Labels, Hinweise */
    --text-sm:   0.875rem;    /* 14px — Body small, Badges */
    --text-base: 1rem;        /* 16px — Body default */
    --text-lg:   1.125rem;    /* 18px — H4, Card-Titel */
    --text-xl:   1.25rem;     /* 20px — H3 */
    --text-2xl:  1.5rem;      /* 24px — H2 */
    --text-3xl:  1.75rem;     /* 28px — H1 (Section-Level) */
    --text-4xl:  2rem;        /* 32px — Page-Title */

    /* ─── Font Families ─── */
    --font-ui:   'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    /* KaTeX_Math (not KaTeX_Main) is the font KaTeX uses to render
       single-letter math identifiers in block formulas — distinct
       letterforms compared with KaTeX_Main-Italic. Prefer it so
       inline <i>E</i> in running text matches the block-formula look. */
    --font-math: 'KaTeX_Math', 'KaTeX_Main', 'Latin Modern Math',
                 'Cambria Math', 'Times New Roman', serif;
    --font-mono: 'SFMono-Regular', 'Menlo', 'Consolas', 'Courier New', monospace;

    /* ─── Shadow / Elevation Scale ─── */
    --shadow-sm: 0 2px 4px rgba(var(--primary-rgb), 0.04);
    --shadow-md: 0 4px 16px rgba(var(--primary-rgb), 0.06);
    --shadow-lg: 0 8px 32px rgba(var(--primary-rgb), 0.07);
    --shadow-xl: 0 10px 40px rgba(var(--primary-rgb), 0.10);

    --shadow-hover-sm: 0 6px 20px rgba(var(--primary-rgb), 0.10);
    --shadow-hover-md: 0 10px 24px rgba(var(--primary-rgb), 0.12);
    --shadow-hover-lg: 0 12px 48px rgba(var(--primary-rgb), 0.12);

    /* ─── Gradients ─── */
    --gradient-page-bg:
        radial-gradient(circle at top right,
            rgba(var(--primary-rgb), 0.18), transparent 55%),
        linear-gradient(180deg,
            rgba(241, 245, 255, 0.9),
            rgba(231, 238, 255, 0.65));

    --gradient-card-bg: linear-gradient(145deg,
        rgba(var(--neutrals-0-rgb), 0.98) 0%,
        rgba(248, 250, 255, 0.95) 100%);

    --gradient-card-subtle: linear-gradient(135deg,
        var(--neutrals-0) 0%,
        rgba(var(--primary-rgb), 0.03) 100%);

    --gradient-title: linear-gradient(135deg,
        var(--primary-color) 0%,
        var(--primary-light) 100%);

    --gradient-accent-bar: linear-gradient(180deg,
        var(--primary-color) 0%,
        var(--primary-light) 100%);

    /* ─── Transitions ─── */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* ─── Z-Index Scale ───
       Matches existing hardcoded values in:
         onboarding.css (overlay 10049 / spotlight + elevated 10050 / tooltip 10051)
         search.css     (search overlay 10060) */
    --z-dropdown:            100;
    --z-sticky:              200;
    --z-modal-bg:            10000;
    --z-modal:               10010;
    --z-tooltip:             10020;
    --z-onboarding-overlay:  10049;
    --z-onboarding-content:  10050;
    --z-onboarding-tooltip:  10051;
    --z-search-overlay:      10060;
    --z-toast:               10070;

    /* ─── Border Widths ─── */
    --border-thin:  1px;
    --border-base:  2px;
    --border-thick: 3px;
}