/* ═══════════════════════════════════════════════════════════════════════
   OAK STUDIO — Design Tokens
   Premium Dark Theme | Futuristic | Glassmorphism
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Brand Colors ────────────────────────────────────────────────── */
    --color-bg:            #050505;
    --color-bg-alt:        #0A0A0A;
    --color-surface:       #111111;
    --color-surface-alt:   #181818;
    --color-border:        rgba(255, 255, 255, 0.06);
    --color-border-hover:  rgba(47, 84, 255, 0.3);

    --color-primary:       #2F54FF;
    --color-primary-rgb:   47, 84, 255;
    --color-primary-dark:  #1A3BCC;
    --color-primary-light: #4D6FFF;

    --color-white:         #F8F8F8;
    --color-white-rgb:     248, 248, 248;
    --color-gray-100:      #CFCFCF;
    --color-gray-200:      #A0A0A0;
    --color-gray-300:      #707070;
    --color-gray-400:      #404040;
    --color-gray-500:      #282828;
    --color-gray-600:      #181818;

    /* ── Typography ──────────────────────────────────────────────────── */
    --font-heading:   'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:      'JetBrains Mono', 'Fira Code', monospace;

    --fs-display:     clamp(3.5rem, 8vw, 8rem);
    --fs-h1:          clamp(2.5rem, 5vw, 5rem);
    --fs-h2:          clamp(2rem, 4vw, 3.5rem);
    --fs-h3:          clamp(1.5rem, 2.5vw, 2rem);
    --fs-h4:          clamp(1.25rem, 2vw, 1.5rem);
    --fs-h5:          clamp(1rem, 1.5vw, 1.25rem);
    --fs-body:        clamp(0.938rem, 1.1vw, 1.063rem);
    --fs-body-lg:     clamp(1rem, 1.3vw, 1.188rem);
    --fs-small:       clamp(0.813rem, 0.95vw, 0.875rem);
    --fs-xs:          clamp(0.688rem, 0.8vw, 0.75rem);
    --fs-label:       0.75rem;

    --fw-light:       300;
    --fw-regular:     400;
    --fw-medium:      500;
    --fw-semibold:    600;
    --fw-bold:        700;
    --fw-black:       900;

    --lh-heading:     1.1;
    --lh-body:        1.7;
    --lh-tight:       1.3;

    --ls-tight:       -0.03em;
    --ls-normal:      0;
    --ls-wide:        0.05em;
    --ls-wider:       0.1em;
    --ls-widest:      0.2em;

    /* ── Spacing ─────────────────────────────────────────────────────── */
    --space-xxs:      0.25rem;   /* 4px */
    --space-xs:       0.5rem;    /* 8px */
    --space-sm:       0.75rem;   /* 12px */
    --space-md:       1rem;      /* 16px */
    --space-lg:       1.5rem;    /* 24px */
    --space-xl:       2rem;      /* 32px */
    --space-2xl:      3rem;      /* 48px */
    --space-3xl:      4rem;      /* 64px */
    --space-4xl:      6rem;      /* 96px */
    --space-5xl:      8rem;      /* 128px */
    --space-6xl:      12rem;     /* 192px */

    --section-pad:    clamp(5rem, 10vw, 10rem);
    --container-max:  1400px;
    --container-pad:  clamp(1.5rem, 4vw, 4rem);

    /* ── Borders ─────────────────────────────────────────────────────── */
    --radius-sm:      0.375rem;
    --radius-md:      0.75rem;
    --radius-lg:      1rem;
    --radius-xl:      1.5rem;
    --radius-2xl:     2rem;
    --radius-full:    50%;
    --radius-pill:    999px;

    /* ── Shadows ─────────────────────────────────────────────────────── */
    --shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md:      0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg:      0 8px 30px rgba(0, 0, 0, 0.5);
    --shadow-xl:      0 20px 60px rgba(0, 0, 0, 0.6);
    --shadow-glow:    0 0 30px rgba(var(--color-primary-rgb), 0.3);
    --shadow-glow-sm: 0 0 15px rgba(var(--color-primary-rgb), 0.2);
    --shadow-glow-lg: 0 0 60px rgba(var(--color-primary-rgb), 0.4);

    /* ── Transitions ─────────────────────────────────────────────────── */
    --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:    cubic-bezier(0.76, 0, 0.24, 1);
    --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth:    cubic-bezier(0.25, 0.1, 0.25, 1);

    --dur-fast:       0.15s;
    --dur-normal:     0.3s;
    --dur-slow:       0.5s;
    --dur-slower:     0.8s;
    --dur-slowest:    1.2s;

    --transition-base:  all var(--dur-normal) var(--ease-out);
    --transition-fast:  all var(--dur-fast) var(--ease-out);
    --transition-slow:  all var(--dur-slow) var(--ease-out);

    /* ── Glassmorphism ───────────────────────────────────────────────── */
    --glass-bg:       rgba(17, 17, 17, 0.6);
    --glass-bg-light: rgba(30, 30, 30, 0.4);
    --glass-border:   rgba(255, 255, 255, 0.08);
    --glass-blur:     20px;
    --glass-blur-lg:  40px;

    /* ── Z-Index ─────────────────────────────────────────────────────── */
    --z-dropdown:     100;
    --z-sticky:       200;
    --z-fixed:        300;
    --z-modal:        400;
    --z-cursor:       500;
    --z-loader:       9999;
}