/* design system (colors, spacing, fonts) */

/* ================================
   FONTS
   ================================ */

@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/source-sans-pro/SourceSansPro-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/source-sans-pro/SourceSansPro-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/source-sans-pro/SourceSansPro-Semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/source-sans-pro/SourceSansPro-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* =========================================================
   DESIGN SYSTEM - TOKENS
   ========================================================= */

:root {
    /* Typography */
    --font-primary: 'Source Sans Pro', system-ui, -apple-system, sans-serif;

    --font-sm: 0.875rem;
    --font-base: 1rem;
    --font-lg: 1.25rem;
    --font-xl: clamp(1.5rem, 2.5vw, 2rem);
    --font-xxl: clamp(2.25rem, 4vw, 3rem);

    --font-regular: 400;
    --font-semibold: 600;
    --font-bold: 700;

    --line-body: 1.6;
    --line-heading: 1.25;

    /* Brand */
    --color-mauve: #ce9c9c;
    --color-mauve-soft: rgba(206, 156, 156, 0.08);

    /* Neutrals */
    --color-bg: #ffffff;
    --color-text: #111111;
    --color-muted: #555555;
    --color-border: #eeeeee;

    /* Effects */
    --glow-soft: rgba(206, 156, 156, 0.25);
    --glow-faint: rgba(206, 156, 156, 0.15);

    /* Layout */
    --container-width: 900px;

    /* Spacing Scale
   0.5rem  = 8px
   1rem    = 16px
   1.5rem  = 24px
   2.5rem  = 40px
   4rem    = 64px
   6rem    = 96px
 */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;

    /* Radius */
    --radius-sm: 6px;
    --radius-pill: 999px;
}

/* =========================================================
   THEME - DARK MODE (auto + manual toggle)
   ========================================================= */

/* Manual dark mode (via JS toggle) */
html[data-theme="dark"] {
    --color-bg: #0f0f10;
    --color-text: #f3f3f4;
    --color-muted: #a1a1aa;
    --color-border: #1f1f23;

    --glow-soft: rgba(206, 156, 156, 0.35);
    --glow-faint: rgba(206, 156, 156, 0.2);
}

/* Manual light mode (via JS toggle) */
html[data-theme="light"] {
    --color-bg: #ffffff;
    --color-text: #111111;
    --color-muted: #666666;
    --color-border: #e5e5e5;

    --glow-soft: rgba(206, 156, 156, 0.25);
    --glow-faint: rgba(206, 156, 156, 0.15);
}

/* Auto dark mode (if user prefers dark AND no manual override) */
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) {
        /* dark variables */
        --color-bg: #0f0f10;
        --color-text: #f3f3f4;
        --color-muted: #a1a1aa;
        --color-border: #1f1f23;

        --glow-soft: rgba(206, 156, 156, 0.35);
        --glow-faint: rgba(206, 156, 156, 0.2);
    }
}