/* ============================================
   DEFPROD 1 — Design Tokens
   ============================================ */

:root {
    /* ---- Colors: Light Mode ---- */
    --color-bg:             #FAFCFF;
    --color-surface:        #F0F3F6;
    --color-surface-alt:    #E8ECF0;
    --color-teal:           #2CB1AC;
    --color-teal-hover:     #249E99;
    --color-amber:          #FFC447;
    --color-amber-hover:    #E0AB30;
    --color-text:           #1C1E23;
    --color-text-secondary: #7B8794;
    --color-border:         #D8DDE3;
    --color-danger:         #E74C3C;

    /* Dark palette (used in dark sections even in light mode) */
    --color-dark-bg:            #0E1117;
    --color-dark-surface:       #161B22;
    --color-dark-surface-hover: #1E242C;
    --color-dark-text:          #E0F7FA;
    --color-dark-text-muted:    #B0BEC5;
    --color-dark-border:        rgba(224, 247, 250, 0.08);

    /* ---- Typography ---- */
    --font-family:      'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:        'JetBrains Mono', 'Fira Code', monospace;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semi:   600;
    --font-weight-bold:   700;

    --text-xs:   clamp(0.75rem, 0.7rem + 0.15vw, 0.8125rem);
    --text-sm:   clamp(0.8125rem, 0.78rem + 0.18vw, 0.875rem);
    --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
    --text-lg:   clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
    --text-xl:   clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    --text-2xl:  clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
    --text-3xl:  clamp(2rem, 1.6rem + 1.2vw, 2.75rem);
    --text-hero: clamp(2.75rem, 2rem + 2.5vw, 4.5rem);

    --leading-tight:  1.2;
    --leading-normal: 1.6;
    --leading-loose:  1.8;

    --tracking-tight:  -0.02em;
    --tracking-normal:  0;
    --tracking-wide:    0.05em;
    --tracking-wider:   0.1em;

    /* ---- Spacing (fluid) ---- */
    --space-xs:      clamp(0.25rem, 0.2rem + 0.15vw, 0.375rem);
    --space-sm:      clamp(0.5rem, 0.45rem + 0.2vw, 0.75rem);
    --space-md:      clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
    --space-lg:      clamp(1.5rem, 1.3rem + 0.7vw, 2rem);
    --space-xl:      clamp(2rem, 1.6rem + 1.2vw, 3rem);
    --space-2xl:     clamp(3rem, 2.5rem + 1.5vw, 4rem);
    --space-3xl:     clamp(4rem, 3rem + 2vw, 6rem);
    --space-4xl:     clamp(5rem, 4rem + 3vw, 8rem);
    --space-section: clamp(4rem, 3rem + 3vw, 7rem);

    /* ---- Shadows ---- */
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.16);
    --shadow-glow-teal:  0 0 20px rgba(44, 177, 172, 0.3), 0 0 40px rgba(44, 177, 172, 0.15);
    --shadow-glow-amber: 0 0 20px rgba(255, 196, 71, 0.3), 0 0 40px rgba(255, 196, 71, 0.15);

    /* ---- Borders & Radius ---- */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-full: 9999px;

    /* ---- Transitions ---- */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ---- Glassmorphism ---- */
    --glass-bg:     rgba(255, 255, 255, 0.7);
    --glass-blur:   blur(12px);
    --glass-border: rgba(255, 255, 255, 0.2);

    /* ---- Layout ---- */
    --max-width:    1200px;
    --max-width-narrow: 800px;
}

/* ---- Dark Mode Overrides ---- */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg:             #0E1117;
        --color-surface:        #161B22;
        --color-surface-alt:    #1E242C;
        --color-teal:           #2CD1C4;
        --color-teal-hover:     #3DE8DC;
        --color-amber:          #FFD166;
        --color-amber-hover:    #FFE08A;
        --color-text:           #E0F7FA;
        --color-text-secondary: #B0BEC5;
        --color-border:         rgba(224, 247, 250, 0.08);
        --color-danger:         #FF6B6B;

        --glass-bg:     rgba(22, 27, 34, 0.7);
        --glass-border: rgba(224, 247, 250, 0.06);

        --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4);
        --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.5);
        --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.6);
    }
}