/* ============================================================
   BUSYBEAVER — DESIGN TOKENS V4
   Montserrat (headings) + Nunito (body)
   Premium: Black + Gold + Light Gray
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Nunito:wght@300;400;500;600;700&display=swap');

:root {
    /* ── BLACK (primary) ── */
    --color-black: #0A0A0A;
    --color-black-soft: #1A1A1A;
    --color-black-warm: #1E1E1E;
    --color-charcoal: #2D2D2D;
    --color-graphite: #3A3A3A;

    /* ── GOLD (accent) ── */
    --color-gold: #C8A44E;
    --color-gold-light: #D4B86A;
    --color-gold-dark: #A8882E;
    --color-gold-muted: #B8964A;
    --color-gold-10: rgba(200, 164, 78, 0.10);
    --color-gold-15: rgba(200, 164, 78, 0.15);
    --color-gold-5: rgba(200, 164, 78, 0.05);

    /* ── TEAL (brand — secondary accent) ── */
    --bb-primary-500: #0E9AA7;
    --color-primary: #0E5A64;
    --color-primary-dark: #0A464E;
    --color-primary-10: rgba(14, 154, 167, 0.08);

    /* ── GRAYS (warm) ── */
    --color-text: #0A0A0A;
    --color-text-secondary: #4A4A4A;
    --color-muted: #6B6B6B;
    --color-muted-light: #8A8A8A;
    --color-border: #E0E0E0;
    --color-border-light: #EBEBEB;
    --color-background: #F7F7F5;
    --color-background-warm: #F5F3F0;
    --color-background-cream: #FAF9F7;
    --color-white: #FFFFFF;
    --color-white-80: rgba(255, 255, 255, 0.80);
    --color-white-60: rgba(255, 255, 255, 0.60);
    --color-white-40: rgba(255, 255, 255, 0.40);
    --color-white-10: rgba(255, 255, 255, 0.10);

    /* ── STATUS ── */
    --color-success: #2D8A56;
    --color-warning: #C8A44E;
    --color-danger: #C44040;

    /* ── GRADIENTS ── */
    --gradient-gold: linear-gradient(135deg, #C8A44E 0%, #D4B86A 50%, #A8882E 100%);
    --gradient-dark: linear-gradient(135deg, #0A0A0A 0%, #1E1E1E 100%);
    --gradient-gold-text: linear-gradient(135deg, #A8882E 0%, #C8A44E 50%, #D4B86A 100%);
    --gradient-hero-bg: radial-gradient(ellipse at 70% 50%, rgba(200,164,78,0.04) 0%, rgba(14,154,167,0.03) 40%, transparent 70%);
    --gradient-cta: linear-gradient(135deg, #0A0A0A 0%, #1E1E1E 60%, #2D2D2D 100%);

    /* ── TYPOGRAPHY ── */
    --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;

    --display-xl: 54px;
    --display-lg: 46px;
    --display-md: 36px;
    --display-sm: 28px;
    --heading-lg: 32px;
    --heading-md: 28px;
    --heading-sm: 24px;
    --heading-xs: 20px;
    --body-lg: 18px;
    --body-md: 16px;
    --body-sm: 14px;
    --caption: 13px;
    --micro: 12px;
    --nano: 11px;

    --lh-tight: 1.05;
    --lh-snug: 1.15;
    --lh-normal: 1.5;
    --lh-relaxed: 1.7;

    --fw-thin: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --fw-black: 900;

    /* ── SPACING ── */
    --space-1: 2px;  --space-2: 4px;  --space-3: 6px;
    --space-4: 8px;  --space-6: 12px; --space-8: 16px;
    --space-10: 20px; --space-12: 24px; --space-16: 32px;
    --space-20: 40px; --space-24: 48px; --space-32: 64px;
    --space-40: 80px; --space-48: 96px; --space-60: 120px;

    /* ── SHADOWS ── */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
    --shadow-gold: 0 4px 16px rgba(200,164,78,0.2);
    --shadow-dark: 0 4px 16px rgba(0,0,0,0.2);

    /* ── RADIUS ── */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 24px;
    --radius-full: 50%;

    /* ── TRANSITIONS ── */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-entrance: 500ms cubic-bezier(0.16, 1, 0.3, 1);

    /* ── Z-INDEX ── */
    --z-nav: 999;
    --z-mobile-menu: 998;

    /* ── LAYOUT ── */
    --container-max: 1200px;
    --container-narrow: 1000px;
    --container-text: 620px;
    --nav-height: 90px;
    --gutter: 20px;
}