/* ============================================
   MONTELEONE TONSOR — DESIGN TOKENS
   Modern Architectural Grooming Design System
   ============================================ */

:root {
    /* ─── Surface Colors ─── */
    --surface: #121412;
    --surface-dim: #121412;
    --surface-bright: #383a37;
    --surface-container-lowest: #0d0f0d;
    --surface-container-low: #1a1c1a;
    --surface-container: #1e201e;
    --surface-container-high: #292a28;
    --surface-container-highest: #333533;

    /* ─── On-Surface Colors ─── */
    --on-surface: #e2e3df;
    --on-surface-variant: #c5c6ca;
    --inverse-surface: #e2e3df;
    --inverse-on-surface: #2f312e;

    /* ─── Outline / Border ─── */
    --outline: #8f9194;
    --outline-variant: #45474a;
    --marble-grey: #6B6F72;

    /* ─── Brand Colors ─── */
    --primary: #c6c6c9;
    --on-primary: #2f3133;
    --primary-container: #101214;
    --on-primary-container: #7c7d80;

    /* ─── Secondary ─── */
    --secondary: #c5c7c9;
    --on-secondary: #2e3133;
    --secondary-container: #444749;

    /* ─── Tertiary ─── */
    --tertiary: #c1c7cd;
    --on-tertiary: #2b3136;

    /* ─── Accent / Signature ─── */
    --soft-white: #F4F4F0;
    --cool-led: #F8FAFF;
    --charcoal: #101214;
    --stone-grey: #383a37;
    --brushed-silver-start: #8f9194;
    --brushed-silver-end: #6B6F72;

    /* ─── Status ─── */
    --error: #ffb4ab;
    --on-error: #690005;
    --error-container: #93000a;
    --success: #81C784;
    --warning: #FFD54F;

    /* ─── Typography ─── */
    --font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Display */
    --display-size: 80px;
    --display-weight: 200;
    --display-line-height: 1.1;
    --display-tracking: -0.04em;

    /* Headline Large */
    --headline-lg-size: 48px;
    --headline-lg-weight: 300;
    --headline-lg-line-height: 1.2;
    --headline-lg-tracking: -0.02em;

    /* Headline Medium */
    --headline-md-size: 32px;
    --headline-md-weight: 400;
    --headline-md-line-height: 1.3;
    --headline-md-tracking: -0.01em;

    /* Headline Small */
    --headline-sm-size: 24px;
    --headline-sm-weight: 400;
    --headline-sm-line-height: 1.3;
    --headline-sm-tracking: -0.005em;

    /* Body Large */
    --body-lg-size: 18px;
    --body-lg-weight: 400;
    --body-lg-line-height: 1.6;

    /* Body Medium */
    --body-md-size: 16px;
    --body-md-weight: 400;
    --body-md-line-height: 1.6;

    /* Body Small */
    --body-sm-size: 14px;
    --body-sm-weight: 400;
    --body-sm-line-height: 1.5;

    /* Label Caps */
    --label-size: 12px;
    --label-weight: 600;
    --label-tracking: 0.15em;

    /* ─── Spacing (8px base unit) ─── */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;
    --space-6: 48px;
    --space-8: 64px;
    --space-10: 80px;
    --space-12: 96px;
    --space-15: 120px;
    --space-20: 160px;

    --gutter: 32px;
    --margin: 64px;
    --container-max: 1440px;

    /* ─── Border Radius (Soft-Sharp) ─── */
    --radius-sm: 2px;
    --radius: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;

    /* ─── Glassmorphism ─── */
    --glass-blur: 20px;
    --glass-bg: rgba(56, 58, 55, 0.15);
    --glass-border: 1px solid var(--marble-grey);
    --glass-border-hover: 1px solid var(--cool-led);

    /* ─── Shadows / Glow ─── */
    --led-glow: 0 0 12px 2px rgba(248, 250, 255, 0.8), inset 0 0 6px 1px rgba(248, 250, 255, 0.4);
    --led-glow-lg: 0 0 24px 4px rgba(248, 250, 255, 0.9), inset 0 0 12px 2px rgba(248, 250, 255, 0.5);
    --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.25);

    /* ─── Gradients ─── */
    --gradient-brushed-metal: linear-gradient(135deg, var(--stone-grey), var(--marble-grey));
    --gradient-led-bar: linear-gradient(90deg, transparent, var(--cool-led), transparent);
    --gradient-surface: linear-gradient(180deg, var(--surface-container-lowest), var(--surface));

    /* ─── Transitions ─── */
    --transition-fast: 150ms ease;
    --transition: 300ms ease;
    --transition-slow: 500ms ease;
    --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ─── Z-Index Scale ─── */
    --z-base: 1;
    --z-sticky: 100;
    --z-overlay: 200;
    --z-modal: 300;
    --z-toast: 400;
    --z-cookie: 500;
}

/* ─── Responsive Breakpoints ─── */
@media (max-width: 1200px) {
    :root {
        --margin: 40px;
        --display-size: 56px;
        --headline-lg-size: 36px;
        --headline-md-size: 28px;
    }
}

@media (max-width: 768px) {
    :root {
        --margin: 24px;
        --gutter: 16px;
        --display-size: 40px;
        --headline-lg-size: 28px;
        --headline-md-size: 24px;
        --space-15: 80px;
        --space-20: 100px;
    }
}

@media (max-width: 480px) {
    :root {
        --margin: 16px;
        --display-size: 32px;
        --headline-lg-size: 24px;
    }
}