/**
 * Capital Razors — Design Tokens
 * ==============================
 * Dark luxury theme with gold accents.
 * All design tokens as CSS custom properties for consistent styling.
 *
 * Sprint: Sprint-0000200-CR-Foundation-Auth
 * BLI: BLI-0002006
 */

:root {
    /* ─── Brand Colors ─── */
    --cr-black: #0E0E12;
    --cr-black-light: #16161C;
    --cr-black-lighter: #1E1E26;
    --cr-gold: #C9A84C;
    --cr-gold-light: #D4B85E;
    --cr-gold-dark: #B8973E;
    --cr-gold-dim: rgba(201, 168, 76, 0.15);
    --cr-gold-glow: rgba(201, 168, 76, 0.25);

    /* ─── Background Tokens ─── */
    --cr-bg-primary: #0E0E12;
    --cr-bg-secondary: #16161C;
    --cr-bg-card: #1A1A22;
    --cr-bg-card-hover: #22222C;
    --cr-bg-sidebar: #111117;
    --cr-bg-header: #0E0E12;
    --cr-bg-input: #1A1A22;
    --cr-bg-overlay: rgba(14, 14, 18, 0.85);

    /* ─── Text Tokens ─── */
    --cr-text-primary: #F5F0E8;
    --cr-text-secondary: #9A958D;
    --cr-text-muted: #6B665E;
    --cr-text-gold: #C9A84C;
    --cr-text-inverse: #0E0E12;

    /* ─── Border Tokens ─── */
    --cr-border: rgba(255, 255, 255, 0.08);
    --cr-border-light: rgba(255, 255, 255, 0.04);
    --cr-border-gold: rgba(201, 168, 76, 0.3);
    --cr-border-focus: rgba(201, 168, 76, 0.5);

    /* ─── Semantic Colors ─── */
    --cr-success: #2ECC71;
    --cr-success-dim: rgba(46, 204, 113, 0.15);
    --cr-warning: #F39C12;
    --cr-warning-dim: rgba(243, 156, 18, 0.15);
    --cr-danger: #E74C3C;
    --cr-danger-dim: rgba(231, 76, 60, 0.15);
    --cr-info: #3498DB;
    --cr-info-dim: rgba(52, 152, 219, 0.15);

    /* ─── Typography ─── */
    --cr-font-heading: 'Cormorant Garamond', 'Georgia', serif;
    --cr-font-body: 'DM Sans', 'Inter', system-ui, sans-serif;
    --cr-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

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

    /* Font Weights */
    --cr-weight-normal: 400;
    --cr-weight-medium: 500;
    --cr-weight-semibold: 600;
    --cr-weight-bold: 700;

    /* ─── Spacing ─── */
    --cr-space-1: 0.25rem;    /* 4px */
    --cr-space-2: 0.5rem;     /* 8px */
    --cr-space-3: 0.75rem;    /* 12px */
    --cr-space-4: 1rem;       /* 16px */
    --cr-space-5: 1.25rem;    /* 20px */
    --cr-space-6: 1.5rem;     /* 24px */
    --cr-space-8: 2rem;       /* 32px */
    --cr-space-10: 2.5rem;    /* 40px */
    --cr-space-12: 3rem;      /* 48px */

    /* ─── Border Radius ─── */
    --cr-radius-sm: 4px;
    --cr-radius-md: 8px;
    --cr-radius-lg: 12px;
    --cr-radius-xl: 16px;
    --cr-radius-full: 9999px;

    /* ─── Shadows ─── */
    --cr-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --cr-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --cr-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --cr-shadow-gold: 0 0 20px rgba(201, 168, 76, 0.15);

    /* ─── Transitions ─── */
    --cr-transition-fast: 150ms ease;
    --cr-transition-base: 250ms ease;
    --cr-transition-slow: 400ms ease;

    /* ─── Layout ─── */
    --cr-sidebar-width: 260px;
    --cr-sidebar-collapsed: 64px;
    --cr-header-height: 56px;
    --cr-content-max-width: 1200px;

    /* ─── Z-Index Scale ─── */
    --cr-z-sidebar: 40;
    --cr-z-header: 50;
    --cr-z-dropdown: 60;
    --cr-z-modal: 70;
    --cr-z-toast: 80;
}

/* ─── Responsive Breakpoints (reference, used in media queries) ─── */
/* sm: 640px  | md: 768px  | lg: 1024px  | xl: 1280px */