/* ============================================
   DESIGN TOKENS
   Inspired by Apple's design language:
   - Near-black backgrounds for dark sections
   - Extremely restrained color palette
   - Blue as the singular accent
   - Generous spacing scale
   ============================================ */

:root {
    /* ---- Palette ---- */
    --white:        #fafafa;
    --off-white:    #f5f5f7;
    --gray-50:      #ebebed;
    --gray-100:     #d2d2d7;
    --gray-200:     #a1a1a6;
    --gray-300:     #86868b;
    --gray-400:     #6e6e73;
    --gray-500:     #515154;
    --gray-600:     #424245;
    --gray-700:     #333336;
    --gray-800:     #1d1d1f;
    --black:        #0a0a0a;
    --true-black:   #000000;

    /* Accents */
    --blue:         #0071e3;
    --blue-light:   #2997ff;
    --blue-hover:   #0077ed;
    --violet:       #a855f7;
    --teal:         #5eead4;
    --green:        #30d158;
    --orange:       #fb923c;
    --rose:         #f43f5e;

    /* Gradients */
    --gradient-brand: linear-gradient(135deg, var(--blue) 0%, var(--violet) 50%, var(--teal) 100%);
    --gradient-dark:  linear-gradient(180deg, #0a0a0a 0%, #111113 100%);
    --gradient-glow:  radial-gradient(ellipse at 50% 0%, rgba(0, 113, 227, 0.08) 0%, transparent 60%);

    /* ---- Typography ---- */
    --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    --font-serif:   'Instrument Serif', Georgia, 'Times New Roman', serif;
    --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

    /* Scale */
    --text-xs:   0.72rem;
    --text-sm:   0.82rem;
    --text-base: 0.95rem;
    --text-md:   1.05rem;
    --text-lg:   1.2rem;
    --text-xl:   1.5rem;
    --text-2xl:  2rem;
    --text-3xl:  2.8rem;
    --text-4xl:  3.5rem;
    --text-hero: clamp(3.5rem, 9vw, 7rem);

    /* ---- Spacing ---- */
    --space-xs:  0.5rem;
    --space-sm:  1rem;
    --space-md:  1.5rem;
    --space-lg:  2.5rem;
    --space-xl:  4rem;
    --space-2xl: 6rem;
    --space-3xl: 8rem;

    /* ---- Layout ---- */
    --max-width:   1120px;
    --nav-height:  56px;
    --border-radius-sm: 10px;
    --border-radius-md: 16px;
    --border-radius-lg: 24px;
    --border-radius-pill: 980px;

    /* ---- Transitions ---- */
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 0.15s;
    --duration-base: 0.3s;
    --duration-slow: 0.6s;
    --duration-reveal: 0.8s;

    /* ---- Borders / Surfaces ---- */
    --border-light:   1px solid rgba(0, 0, 0, 0.06);
    --border-dark:    1px solid rgba(255, 255, 255, 0.06);
    --surface-glass:  rgba(250, 250, 250, 0.72);
    --surface-dark:   rgba(255, 255, 255, 0.03);
    --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:      0 4px 16px rgba(0, 0, 0, 0.06);
    --shadow-lg:      0 12px 40px rgba(0, 0, 0, 0.08);
    --shadow-glow:    0 0 60px rgba(0, 113, 227, 0.1);
}