/**
 * BLADE BOSS — DESIGN TOKENS
 * Single Source of Truth. Every page reads from here. Period.
 * 
 * If you change a color here, it changes EVERYWHERE.
 * If you change a font here, it changes EVERYWHERE.
 * That's the whole point.
 * 
 * Naming convention:
 *   --bb-{category}-{variant}
 *   --bb-green, --bb-green-light, --bb-green-dark
 */

:root {

    /* ━━━ Brand Colors ━━━ */
    --bb-green:          #1E5E34;
    --bb-green-light:    #2A7A48;
    --bb-green-dark:     #0A2818;
    --bb-green-muted:    #87A96B;
    --bb-green-mint:     #E8F5E9;
    --bb-green-bright:   #10B981;
    --bb-mint:           #E8F5E9;  /* alias → same as --bb-green-mint (legacy compat) */

    --bb-orange:         #F57842;
    --bb-orange-hover:   #E86A2E;
    --bb-orange-active:  #D95F28;
    --bb-orange-glow:    rgba(245, 120, 66, 0.3);
    --bb-orange-subtle:  rgba(245, 120, 66, 0.08);

    --bb-navy:           #0A0F15;
    --bb-navy-light:     #131B26;

    /* ━━━ Neutrals ━━━ */
    --bb-white:          #FFFFFF;
    --bb-off-white:      #F9F9F7;
    --bb-smoke:          #F5F5F5;
    --bb-ash:            #E0E0E0;
    --bb-light-gray:     #ECECEC;
    --bb-mid-gray:       #9A9A9A;
    --bb-charcoal:       #1A1A1A;
    --bb-black:          #000000;

    /* ━━━ Semantic ━━━ */
    --bb-success:        #10B981;
    --bb-error:          #EF4444;
    --bb-warning:        #F59E0B;
    --bb-info:           #3B82F6;

    /* ━━━ Glassmorphism ━━━ */
    --bb-glass-bg:       rgba(255, 255, 255, 0.05);
    --bb-glass-border:   rgba(255, 255, 255, 0.08);
    --bb-glass-bg-light: rgba(255, 255, 255, 0.85);
    --bb-glass-border-light: rgba(0, 0, 0, 0.06);

    /* ━━━ Typography ━━━ */
    --font-display:      'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:         'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:         'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

    /* Font sizes — fluid scale */
    --text-xs:    clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);       /* ~11-13px */
    --text-sm:    clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem);       /* ~13-14px */
    --text-base:  clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);      /* ~15-17px */
    --text-lg:    clamp(1.1rem, 1rem + 0.5vw, 1.25rem);          /* ~18-20px */
    --text-xl:    clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);       /* ~20-24px */
    --text-2xl:   clamp(1.5rem, 1.25rem + 1.25vw, 2rem);         /* ~24-32px */
    --text-3xl:   clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);     /* ~30-40px */
    --text-4xl:   clamp(2.25rem, 1.75rem + 2.5vw, 3.25rem);      /* ~36-52px */
    --text-5xl:   clamp(2.75rem, 2rem + 3.75vw, 4rem);           /* ~44-64px */

    /* ━━━ Spacing Scale (8px base) ━━━ */
    --space-1:   0.25rem;     /*  4px  */
    --space-2:   0.5rem;      /*  8px  */
    --space-3:   0.75rem;     /* 12px  */
    --space-4:   1rem;        /* 16px  */
    --space-5:   1.5rem;      /* 24px  */
    --space-6:   2rem;        /* 32px  */
    --space-8:   3rem;        /* 48px  */
    --space-10:  4rem;        /* 64px  */
    --space-12:  5rem;        /* 80px  */
    --space-14:  6rem;        /* 96px  */
    --space-16:  8rem;        /* 128px */

    /* ━━━ Shadows ━━━ */
    --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-sm:   0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.16);
    --shadow-2xl:  0 24px 64px rgba(0, 0, 0, 0.2);
    --shadow-glow: 0 0 40px rgba(30, 94, 52, 0.15);
    --shadow-orange-glow: 0 0 30px rgba(245, 120, 66, 0.2);

    /* ━━━ Borders ━━━ */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-2xl:  32px;
    --radius-full: 9999px;

    /* ━━━ Easings — Buttery 2040 iOS feel ━━━ */
    --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring:     cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-smooth:     cubic-bezier(0.25, 0.1, 0.25, 1);

    /* ━━━ Durations ━━━ */
    --duration-fast:    120ms;
    --duration-normal:  200ms;
    --duration-slow:    350ms;
    --duration-page:    400ms;

    /* ━━━ Z-Index Scale ━━━ */
    --z-base:     1;
    --z-above:    10;
    --z-sticky:   50;
    --z-nav:      100;
    --z-overlay:  500;
    --z-modal:    1000;
    --z-toast:    2000;

    /* ━━━ Layout ━━━ */
    --max-width:     1200px;
    --max-width-sm:  800px;
    --max-width-xs:  600px;
    --content-max:   1200px;
    --page-gutter:   clamp(16px, 4vw, 40px);
    --nav-height:    72px;
    --nav-height-mobile: 60px;
    --footer-gap:    var(--space-8);

    /* ━━━ Safe areas (iOS notch, etc.) ━━━ */
    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left, 0px);
    --safe-right:  env(safe-area-inset-right, 0px);
}

/* ━━━ Dark mode tokens (future-proofing) ━━━ */
@media (prefers-color-scheme: dark) {
    :root {
        /* Override when dark mode is implemented */
        /* --bb-glass-bg: rgba(255, 255, 255, 0.03); */
    }
}

/* ━━━ Reduced motion ━━━ */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast:   0ms;
        --duration-normal: 0ms;
        --duration-slow:   0ms;
        --duration-page:   0ms;
    }
}