/**
 * VICTORY GRACEJOHNS - CSS CUSTOM PROPERTIES & TOKENS
 * Strict color palette, typography scales, spacing units, and theme variables.
 */

:root {
  /* Proposed Brand Palette Raw Values */
  --raw-electric-blue: #2563EB;
  --raw-electric-blue-hover: #1D4ED8;
  --raw-dark-navy: #0B1F3A;
  --raw-dark-navy-deep: #071324;
  --raw-dark-navy-surface: #0E233E;
  --raw-dark-navy-surface-alt: #132D4E;
  --raw-dark-orange: #C65D19;
  --raw-dark-orange-hover: #A3480F;
  --raw-white: #FFFFFF;
  --raw-soft-white: #F5F7FA;
  --raw-soft-white-alt: #EDF2F7;
  --raw-black: #171717;
  --raw-light-gray: #E5E7EB;
  --raw-gray-400: #9CA3AF;
  --raw-gray-500: #6B7280;
  --raw-gray-600: #4B5563;

  /* Typography */
  --font-primary: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  /* Fluid Typographic Scales */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.5rem);
  --text-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3.25rem);
  --text-hero: clamp(2.75rem, 2rem + 3.75vw, 5.5rem);

  /* Spacing System */
  --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-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout Boundaries */
  --container-max: 1320px;
  --container-padding: clamp(1.25rem, 1rem + 2vw, 3rem);

  /* Elevation & Borders */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-radius-full: 9999px;
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* LIGHT THEME (Default) */
  --bg-primary: var(--raw-white);
  --bg-secondary: var(--raw-soft-white);
  --bg-surface: var(--raw-white);
  --bg-surface-elevated: var(--raw-white);
  --text-heading: var(--raw-dark-navy);
  --text-body: var(--raw-black);
  --text-muted: var(--raw-gray-600);
  --text-dim: var(--raw-gray-500);
  --accent-primary: var(--raw-electric-blue);
  --accent-hover: var(--raw-electric-blue-hover);
  --accent-secondary: var(--raw-dark-orange);
  --accent-secondary-hover: var(--raw-dark-orange-hover);
  --border-color: var(--raw-light-gray);
  --border-subtle: rgba(229, 231, 235, 0.8);
  --focus-ring: rgba(37, 99, 235, 0.4);
  --card-shadow: 0 4px 20px -2px rgba(11, 31, 58, 0.05);
  --card-shadow-hover: 0 12px 30px -4px rgba(11, 31, 58, 0.1);
  --theme-toggle-bg: var(--raw-soft-white-alt);
}

/* DARK THEME SPECIFICATION */
[data-theme="dark"] {
  --bg-primary: var(--raw-dark-navy-deep);
  --bg-secondary: var(--raw-dark-navy);
  --bg-surface: var(--raw-dark-navy-surface);
  --bg-surface-elevated: var(--raw-dark-navy-surface-alt);
  --text-heading: var(--raw-white);
  --text-body: var(--raw-light-gray);
  --text-muted: var(--raw-gray-400);
  --text-dim: #94A3B8;
  --accent-primary: #3B82F6;
  --accent-hover: #60A5FA;
  --accent-secondary: #EA580C;
  --accent-secondary-hover: #F97316;
  --border-color: rgba(229, 231, 235, 0.12);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --focus-ring: rgba(59, 130, 246, 0.5);
  --card-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.4);
  --card-shadow-hover: 0 12px 35px -4px rgba(0, 0, 0, 0.6);
  --theme-toggle-bg: var(--raw-dark-navy-surface);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary: var(--raw-dark-navy-deep);
    --bg-secondary: var(--raw-dark-navy);
    --bg-surface: var(--raw-dark-navy-surface);
    --bg-surface-elevated: var(--raw-dark-navy-surface-alt);
    --text-heading: var(--raw-white);
    --text-body: var(--raw-light-gray);
    --text-muted: var(--raw-gray-400);
    --text-dim: #94A3B8;
    --accent-primary: #3B82F6;
    --accent-hover: #60A5FA;
    --accent-secondary: #EA580C;
    --accent-secondary-hover: #F97316;
    --border-color: rgba(229, 231, 235, 0.12);
    --border-subtle: rgba(255, 255, 255, 0.08);
    --focus-ring: rgba(59, 130, 246, 0.5);
    --card-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.4);
    --card-shadow-hover: 0 12px 35px -4px rgba(0, 0, 0, 0.6);
    --theme-toggle-bg: var(--raw-dark-navy-surface);
  }
}