/*
 * Design tokens — single source of truth for color, type, and spacing.
 * Loaded before main.css and components.css.
 */

:root {
    /* Color */
    --bg: #323b47;
    --bg-elevated: #384454;
    --bg-deep: #262d36;
    --text: #f8f8f9;
    --text-muted: #b0b0b0;
    --border: #4a5563;
    --accent: #f5c31b;
    --accent-hover: #ffd340;

    /* Type */
    --font-display: "Montserrat", sans-serif;
    --font-body: "Inter", sans-serif;

    --text-xs: 11px;       /* kickers, nav, labels (uppercase, .22em letter-spacing) */
    --text-sm: 13px;       /* captions, meta strips */
    --text-base: 16px;     /* body */
    --text-lg: 18px;       /* lede paragraphs */
    --text-xl: 24px;       /* sub-headings */
    --text-2xl: 32px;      /* project page h2 */
    --text-3xl: 44px;      /* section h1 */
    --text-display: 72px;  /* homepage hero h1 only */

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

    /* Layout */
    --container: 1280px;

    /* Motion */
    --transition-fast: 200ms;
    --transition-base: 400ms;
}

@media (max-width: 720px) {
    :root {
        --text-display: 40px;
        --text-3xl: 32px;
        --text-2xl: 24px;
    }
}