/* ============================================================
   BERTRAND BRANDS — Design System Tokens
   V5.0.0 — Performance-First Architecture
   ============================================================ */

:root {
  /* ==========================================================
     COLORS — Dark Theme (Default)
     ========================================================== */

  /* Backgrounds */
  --bg: #0a0a0a;
  --bg-elevated: #111111;
  --bg-subtle: #161616;

  /* Text */
  --text: #fafafa;
  --text-muted: #a3a3a3;
  --text-subtle: #737373;

  /* Accent — Amber (Primary Brand) */
  --accent: #D97706;
  --accent-hover: #B45309;
  --accent-glow: rgba(217, 119, 6, 0.4);
  --accent-muted: rgba(217, 119, 6, 0.15);

  /* Focus Studio — Violet */
  --focus-accent: #8B5CF6;
  --focus-accent-hover: #7C3AED;
  --focus-border: rgba(139, 92, 246, 0.25);

  /* Exploratory — Blue */
  --exploratory-accent: #2563EB;
  --exploratory-accent-muted: rgba(37, 99, 235, 0.15);

  /* Borders */
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.15);

  /* ==========================================================
     GLASS PROPERTIES
     ========================================================== */
  --glass-blur: 12px;
  --glass-blur-mobile: 8px;
  --glass-bg: rgba(255, 255, 255, 0.02);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-edge-highlight: rgba(255, 255, 255, 0.08);

  /* ==========================================================
     TYPOGRAPHY
     ========================================================== */

  /* Font Families */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Type Scale */
  --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 */
  --text-5xl: 3rem;        /* 48px */

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;

  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;

  /* ==========================================================
     SPACING
     ========================================================== */
  /* Semantic spacing aliases (used throughout main.css) */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;
  --space-2xl: 12rem;

  /* Granular spacing scale (used subset) */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* ==========================================================
     MOTION
     ========================================================== */

  /* Durations — Granular scale */
  --duration-instant: 50ms;
  --duration-fast: 0.3s;
  --duration-normal: 300ms;
  --duration-medium: 0.6s;
  --duration-slow: 1.2s;
  --duration-slower: 700ms;
  --duration-slowest: 1000ms;

  /* Easings */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ==========================================================
     BORDERS & RADIUS
     ========================================================== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ==========================================================
     SHADOWS
     ========================================================== */
  /* Shadows defined inline where needed */

  /* ==========================================================
     Z-INDEX — managed inline per stacking context (not tokenized)
     ========================================================== */

  /* ==========================================================
     LAYOUT
     ========================================================== */
  --container-max: 1200px;

  /* ==========================================================
     BREAKPOINT REFERENCES (for documentation)
     Use @media queries directly in CSS
     ========================================================== */
  /* --bp-sm: 480px;   */
  /* --bp-md: 768px;   */
  /* --bp-lg: 1024px;  */
  /* --bp-xl: 1280px;  */
  /* --bp-2xl: 1536px; */
}

/* ==========================================================
   LIGHT THEME (Future)
   ========================================================== */
[data-theme="light"] {
  --bg: #fafaf8;
  --bg-elevated: #ffffff;
  --bg-subtle: #f5f5f3;

  --text: #111111;
  --text-muted: #666666;
  --text-subtle: #999999;

  --accent: #B45309;
  --accent-hover: #92400E;

  --border: rgba(0, 0, 0, 0.08);
  --border-hover: rgba(0, 0, 0, 0.15);

  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(0, 0, 0, 0.06);
  --glass-edge-highlight: rgba(255, 255, 255, 0.5);

  /* Shadows defined inline where needed */
}

/* ==========================================================
   REDUCED MOTION
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-medium: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
    --duration-slowest: 0ms;
  }
}