/**
 * Diana Oberoi — Design Tokens (Phase 2)
 * Brand-preserving CSS custom properties for site-wide consistency.
 */
:root {
  /* Brand colors */
  --color-brand-red: #ff0000;
  --color-brand-red-dark: #c60f13;
  --color-brand-gold: #f7b21c;
  --color-brand-gold-light: #f3d500;
  --color-brand-gold-bright: #ffcc00;
  --color-brand-blue: #0090f3;
  --color-brand-blue-dark: #2333a5;
  --color-brand-teal: #0f9fa7;
  --color-brand-purple: #512e83;
  --color-brand-purple-muted: #4e406c;
  --color-accent-pink: #f74d62;
  --color-accent-green: #82bf0c;
  --color-accent-lime: #24ec08;

  /* Surfaces */
  --color-bg-dark: #000000;
  --color-bg-dark-alt: #151010;
  --color-bg-gold: #ffcc00;
  --color-bg-panel: rgba(0, 0, 0, 0.55);
  --color-bg-overlay: rgba(0, 0, 0, 0.85);

  /* Text */
  --color-text-primary: #ffffff;
  --color-text-secondary: #dddddd;
  --color-text-muted: #cccccc;
  --color-text-dark: #000000;
  --color-text-gold: #f8be0b;
  --color-text-highlight: #fc0;

  /* Typography */
  --font-family-base: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-accent: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 1rem;
  --font-size-md: 1.0625rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.625rem;
  --font-size-2xl: 2rem;
  --line-height-tight: 1.25;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.65;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-section: var(--space-8);
  --space-section-lg: var(--space-12);

  /* Radius */
  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-lg: 25px;
  --radius-pill: 30px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-footer: 0 0 15px 0 #9d6783;
  --shadow-keyword: 6px -3px 1px var(--color-brand-red-dark);

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Layout */
  --content-max-width: 75rem;
  --sidebar-width: 25%;
  --touch-target-min: 44px;
  --focus-ring: 2px solid var(--color-brand-gold);
  --focus-ring-offset: 2px;

  /* Breakpoints (reference — use in media queries) */
  /* 320px, 375px, 500px, 768px, 800px, 1024px, 1123px, 1440px */
}