/* ==========================================================================
   CSS Custom Properties — OhHey Design System
   ========================================================================== */

/* --- Font Faces --- */
@font-face {
    font-family: 'Archivo Black';
    src: url('../fonts/ArchivoBlack-Regular.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/DMSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/DMSans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/DMSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* --- Design Tokens --- */
:root {
    /* Typography */
    --font-display: 'Archivo Black', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Font Sizes */
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
    --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
    --text-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
    --text-2xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
    --text-3xl: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);
    --text-hero: clamp(3rem, 2rem + 5vw, 7rem);

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 3rem;
    --space-xl: 6rem;
    --space-2xl: 8rem;
    --space-section: clamp(6rem, 5rem + 5vw, 10rem);

    /* Layout */
    --container-max: 1200px;
    --container-padding: clamp(1.5rem, 3vw, 3rem);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 400ms ease;

    /* Borders */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

    /* Accent — same in both themes */
    --color-accent: #E8913A;
    --color-accent-hover: #D4802E;
}

/* --- Dark Theme (default) --- */
:root,
[data-theme="dark"] {
    --color-bg: #0A0A0A;
    --color-surface: #161616;
    --color-demo: #111111;
    --color-text: #E8E8E8;
    --color-text-secondary: #999999;
    --color-border: #2A2A2A;
    --color-nav-bg: rgba(10, 10, 10, 0.85);
    --color-card-shadow: rgba(0, 0, 0, 0.4);
    --color-card-hover-shadow: rgba(232, 145, 58, 0.1);
}

/* --- Light Theme --- */
[data-theme="light"] {
    --color-bg: #FAFAFA;
    --color-surface: #FFFFFF;
    --color-demo: #111111; /* stays dark */
    --color-text: #111111;
    --color-text-secondary: #666666;
    --color-border: #E0E0E0;
    --color-nav-bg: rgba(250, 250, 250, 0.85);
    --color-card-shadow: rgba(0, 0, 0, 0.08);
    --color-card-hover-shadow: rgba(232, 145, 58, 0.15);
}