/* ==========================================================================
   ExclusiveModels Frontend — Design Tokens
   Single source of truth for the entire frontend UI.
   /css/frontend/tokens.css

   All component files reference these variables.
   No hardcoded colors, spacing, or sizes in component files.

   Uses same engineering approach as admin: rgba colors, rem spacing,
   BEM naming, and layered architecture for consistency across sites.
   ========================================================================== */

:root {

    /* ======================
       COLORS — Base
       ====================== */
    --color-white:                  rgba(255, 255, 255, 1);

    /* ======================
       COLORS — Surface & Background
       ====================== */
    --color-bg-primary:             rgba(8, 8, 12, 1);         /* Deep charcoal - page background */
    --color-bg-surface:             rgba(18, 18, 24, 1);       /* Card surfaces, panels */
    --color-bg-elevated:            rgba(28, 28, 36, 1);       /* Hover states, raised elements */
    --color-bg-overlay:             rgba(0, 0, 0, 0.7);         /* Overlay backdrops */

    /* ======================
       COLORS — Border
       ====================== */
    --color-border:                 rgba(45, 45, 60, 1);        /* Subtle borders */
    --color-border-hover:           rgba(96, 165, 250, 1);      /* Accent borders on hover */

    /* ======================
       COLORS — Text
       ====================== */
    --color-text-primary:           rgba(250, 250, 255, 1);    /* Crisp white - headings, primary text */
    --color-text-secondary:         rgba(170, 170, 190, 1);    /* Soft gray - descriptions */
    --color-text-muted:             rgba(120, 120, 140, 1);    /* Dim text - secondary info */
    --color-text-accent:            rgba(96, 165, 250, 1);     /* Accent blue - links, CTAs */

    /* ======================
       COLORS — Accent / Interactive
       ====================== */
    --color-accent:                 rgba(96, 165, 250, 1);      /* Blue-400 - primary accent */
    --color-accent-hover:           rgba(59, 130, 246, 1);      /* Blue-500 - hover state */
    --color-accent-active:          rgba(37, 99, 235, 1);       /* Blue-600 - active state */
    --color-accent-subtle:          rgba(96, 165, 250, 0.2);    /* Blue-400 @ 20% - subtle backgrounds */

    /* ======================
       COLORS — CTA / Conversion
       ====================== */
    --color-cta-bg:                 rgba(59, 130, 246, 1);      /* CTA button background */
    --color-cta-bg-hover:           rgba(37, 99, 235, 1);       /* CTA hover background */
    --color-cta-text:               rgba(255, 255, 255, 1);      /* CTA text color */

    /* ======================
       TYPOGRAPHY — Font Families
       ====================== */
    --font-family-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-family-mono:   'SF Mono', Monaco, Consolas, 'Courier New', monospace;

    /* ======================
       TYPOGRAPHY — Font Sizes
       ====================== */
    --text-xs:      0.75rem;    /* 12px */
    --text-sm:      0.875rem;   /* 14px */
    --text-base:    1rem;       /* 16px */
    --text-lg:      1.125rem;   /* 18px */
    --text-xl:      1.25rem;    /* 20px */
    --text-2xl:     1.5rem;     /* 24px */
    --text-3xl:     1.875rem;   /* 30px */
    --text-4xl:     2.25rem;    /* 36px */

    /* ======================
       TYPOGRAPHY — Font Weights
       ====================== */
    --font-normal:    400;
    --font-medium:    500;
    --font-semibold:  600;
    --font-bold:      700;

    /* ======================
       TYPOGRAPHY — Line Heights
       ====================== */
    --leading-tight:   1.25;
    --leading-snug:    1.4;
    --leading-normal:  1.5;
    --leading-relaxed: 1.625;

    /* ======================
       SPACING
       ====================== */
    --spacing-1:    0.25rem;   /* 4px */
    --spacing-2:    0.5rem;    /* 8px */
    --spacing-3:    0.75rem;   /* 12px */
    --spacing-4:    1rem;      /* 16px */
    --spacing-5:    1.25rem;   /* 20px */
    --spacing-6:    1.5rem;    /* 24px */
    --spacing-8:    2rem;      /* 32px */
    --spacing-10:   2.5rem;    /* 40px */
    --spacing-12:   3rem;      /* 48px */
    --spacing-16:   4rem;      /* 64px */
    --spacing-20:   5rem;      /* 80px */

    /* ======================
       BORDER RADIUS
       ====================== */
    --radius-sm:    0.25rem;   /* 4px */
    --radius-md:    0.375rem;  /* 6px */
    --radius-lg:    0.5rem;    /* 8px */
    --radius-xl:    0.75rem;   /* 12px */
    --radius-2xl:   1rem;      /* 16px */
    --radius-full:  9999px;    /* pill shape - intentional overflow hack */

    /* ======================
       SIZING
       ====================== */
    --size-focus-ring:      3px;    /* focus outline thickness */
    --width-container:      1200px; /* max-width for main container */
    --width-sidebar:        350px;  /* fixed sidebar width */
    --width-sidebar-mobile:  100%;   /* sidebar width on mobile */

    /* ======================
       SHADOWS
       ====================== */
    --shadow-sm:           0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md:           0 4px 6px rgba(0, 0, 0, 0.5);
    --shadow-lg:           0 10px 15px rgba(0, 0, 0, 0.6);
    --shadow-ring-accent:  0 0 0 3px rgba(96, 165, 250, 0.3);

    /* ======================
       TRANSITIONS
       ====================== */
    --transition-fast:   0.15s ease;
    --transition-base:   0.2s ease;
    --transition-normal: 0.25s ease;
    --transition-slow:   0.3s ease-out;

    /* ======================
       LAYOUT
       ====================== */
    /* 2026-04-11: default overridden at runtime by header.js via setProperty — declared here so IDEs resolve it */
    --header-height: 120px;

    /* ======================
       Z-INDEX SCALE
       ====================== */
    --z-dropdown:   100;
    --z-header:    200;
    --z-sidebar:    200;
    --z-overlay:    300;
    --z-modal:      400;
    --z-tooltip:    500;

}