/* ============================================
   BUTTERFLAI V3 - DESIGN TOKENS
   Apple-inspired premium dark theme
   ============================================ */

:root {
    /* ─────────────────────────────────────────
       COLORS
       ───────────────────────────────────────── */

    /* Primary Brand */
    --color-primary: #696cff;
    --color-primary-hover: #7c7fff;
    --color-primary-glow: rgba(105, 108, 255, 0.4);
    --color-primary-subtle: rgba(105, 108, 255, 0.1);

    /* Backgrounds */
    --color-bg-primary: #000000;
    --color-bg-secondary: #0a0a0a;
    --color-bg-tertiary: #111111;
    --color-bg-elevated: #1a1a1a;
    --color-bg-card: rgba(255, 255, 255, 0.03);

    /* Text */
    --color-text-primary: #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.7);
    --color-text-tertiary: rgba(255, 255, 255, 0.5);
    --color-text-muted: rgba(255, 255, 255, 0.35);

    /* Borders */
    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-subtle: rgba(255, 255, 255, 0.05);

    /* Semantic */
    --color-success: #34c759;
    --color-warning: #ff9f0a;
    --color-error: #ff3b30;

    /* Gradients */
    --gradient-hero: linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
    --gradient-glow: radial-gradient(ellipse at center, var(--color-primary-glow) 0%, transparent 70%);
    --gradient-fade-down: linear-gradient(180deg, transparent 0%, var(--color-bg-primary) 100%);
    --gradient-fade-up: linear-gradient(0deg, transparent 0%, var(--color-bg-primary) 100%);

    /* ─────────────────────────────────────────
       TYPOGRAPHY
       ───────────────────────────────────────── */

    /* Font Families */
    --font-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Monaco, 'Cascadia Mono', monospace;

    /* Font Sizes - Desktop */
    --text-hero: clamp(3rem, 8vw, 6rem);
    --text-display: clamp(2.5rem, 5vw, 4rem);
    --text-headline: clamp(2rem, 4vw, 3rem);
    --text-title: clamp(1.5rem, 3vw, 2rem);
    --text-subtitle: clamp(1.125rem, 2vw, 1.5rem);
    --text-body: 1.125rem;
    --text-body-small: 1rem;
    --text-caption: 0.875rem;
    --text-micro: 0.75rem;

    /* Font Weights */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Line Heights */
    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* Letter Spacing */
    --tracking-tight: -0.03em;
    --tracking-normal: 0;
    --tracking-wide: 0.05em;
    --tracking-wider: 0.1em;

    /* ─────────────────────────────────────────
       SPACING
       ───────────────────────────────────────── */

    --space-xs: 0.5rem;      /* 8px */
    --space-sm: 1rem;        /* 16px */
    --space-md: 1.5rem;      /* 24px */
    --space-lg: 2rem;        /* 32px */
    --space-xl: 3rem;        /* 48px */
    --space-2xl: 4rem;       /* 64px */
    --space-3xl: 6rem;       /* 96px */
    --space-4xl: 8rem;       /* 128px */

    /* Section spacing */
    --section-padding-y: clamp(4rem, 10vh, 8rem);
    --section-padding-x: clamp(1.5rem, 5vw, 4rem);

    /* ─────────────────────────────────────────
       LAYOUT
       ───────────────────────────────────────── */

    --max-width-content: 1200px;
    --max-width-text: 720px;
    --max-width-narrow: 540px;

    --header-height: 60px;
    --header-height-scrolled: 50px;

    /* ─────────────────────────────────────────
       ANIMATION
       ───────────────────────────────────────── */

    /* Durations */
    --duration-instant: 100ms;
    --duration-fast: 200ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    --duration-slower: 800ms;

    /* Easings */
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* ─────────────────────────────────────────
       EFFECTS
       ───────────────────────────────────────── */

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 40px var(--color-primary-glow);

    --blur-sm: 8px;
    --blur-md: 16px;
    --blur-lg: 32px;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* ─────────────────────────────────────────
       Z-INDEX SCALE
       ───────────────────────────────────────── */

    --z-base: 0;
    --z-above: 10;
    --z-header: 100;
    --z-overlay: 200;
    --z-modal: 300;
    --z-toast: 400;
}

/* ─────────────────────────────────────────
   DARK MODE (default, but explicit)
   ───────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }
}