/* ============================================================
   GetDunk Design System — Variables & Tokens
   ============================================================ */

:root {
    /* ── Brand Colors ─────────────────────────────────── */
    --accent-primary: #D4E330;
    --accent-secondary: #000000;
    --accent-tertiary: #A6B41C;
    --accent-glow: rgba(212, 227, 48, 0.4);
    --accent-glow-secondary: rgba(0, 0, 0, 0.15);
    --gradient-brand: linear-gradient(135deg, var(--accent-primary) 0%, #E5F341 100%);
    --gradient-brand-reverse: linear-gradient(135deg, #E5F341 0%, var(--accent-primary) 100%);
    --gradient-brand-wide: linear-gradient(135deg, var(--accent-primary) 0%, #E5F341 50%, var(--accent-primary) 100%);

    /* ── Background ───────────────────────────────────── */
    --bg-dark: #F2F2F2;
    --bg-surface: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-card-hover: #FFFFFF;
    --bg-card-solid: #FFFFFF;
    --bg-elevated: #FAFAFA;
    --bg-glass: rgba(255, 255, 255, 0.8);

    /* ── Text ─────────────────────────────────────────── */
    --text-main: #000000;
    --text-secondary: #222222;
    --text-muted: #666666;
    --text-dim: #888888;

    /* ── Borders & Dividers ───────────────────────────── */
    --border-color: rgba(0, 0, 0, 0.08);
    --border-subtle: rgba(0, 0, 0, 0.04);
    --border-hover: rgba(0, 0, 0, 0.15);
    --border-accent: rgba(212, 227, 48, 0.6);

    /* ── Status Colors ────────────────────────────────── */
    --status-success: #34D399;
    --status-warning: #FBBF24;
    --status-error: #F87171;
    --status-info: #60A5FA;

    /* ── Typography ───────────────────────────────────── */
    --font-heading: 'Syne', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Font sizes — fluid scale */
    --fs-display: clamp(4rem, 8vw, 7rem);
    --fs-h1: clamp(2.5rem, 5vw, 4rem);
    --fs-h2: clamp(2rem, 4vw, 3rem);
    --fs-h3: clamp(1.5rem, 2.5vw, 2rem);
    --fs-h4: clamp(1.15rem, 1.5vw, 1.5rem);
    --fs-body-lg: 1.125rem;
    --fs-body: 1rem;
    --fs-body-sm: 0.875rem;
    --fs-caption: 0.75rem;
    --fs-overline: 0.7rem;

    /* ── Spacing (8px grid) ───────────────────────────── */
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;
    --space-5xl: 128px;

    /* ── Layout ────────────────────────────────────────── */
    --container-width: 1200px;
    --container-narrow: 900px;
    --container-wide: 1400px;
    --section-spacing: clamp(80px, 12vw, 140px);
    --section-spacing-sm: clamp(48px, 8vw, 80px);
    --nav-height: 80px;

    /* ── Border Radius ────────────────────────────────── */
    --radius-xs: 6px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-2xl: 48px;
    --radius-pill: 100px;
    --radius-round: 50%;

    /* ── Shadows ───────────────────────────────────────── */
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 32px 64px rgba(0, 0, 0, 0.1);
    --shadow-glow: 0 12px 32px rgba(212, 227, 48, 0.3);
    --shadow-glow-lg: 0 20px 48px rgba(212, 227, 48, 0.4);

    /* ── Transitions ──────────────────────────────────── */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --duration-fast: 0.15s;
    --duration-normal: 0.3s;
    --duration-slow: 0.5s;
    --duration-slower: 0.8s;

    --transition-fast: all var(--duration-fast) var(--ease-out-quart);
    --transition: all var(--duration-normal) var(--ease-out-quart);
    --transition-slow: all var(--duration-slow) var(--ease-out-expo);
    --transition-slower: all var(--duration-slower) var(--ease-out-expo);

    /* ── Z-Index Scale ────────────────────────────────── */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 500;
    --z-overlay: 900;
    --z-modal: 1000;
    --z-nav: 1100;
    --z-tooltip: 1200;
    --z-cursor: 9999;

    /* ── Glass Effect ─────────────────────────────────── */
    --glass-blur: blur(20px);
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: 1px solid rgba(0, 0, 0, 0.05);
}