:root {
  /* Color System */
  --hd-bg: oklch(0.12 0.015 235);             /* Cinematic Deep Dark Space */
  --hd-surface: oklch(0.16 0.012 235);
  --hd-surface-glass: oklch(0.16 0.012 235 / 0.65);
  --hd-primary: oklch(0.61 0.28 16);          /* High-Chroma Neon Crimson */
  --hd-primary-glow: oklch(0.61 0.28 16 / 0.35);
  --hd-primary-hover: oklch(0.54 0.28 16);
  --hd-accent: oklch(0.79 0.21 75);           /* High-Chroma Neon Gold */
  --hd-accent-hover: oklch(0.72 0.21 75);
  --hd-accent-glow: oklch(0.79 0.21 75 / 0.25);
  --hd-surface-hover: oklch(0.20 0.012 235);
  --hd-surface-glass-bright: oklch(0.20 0.012 235 / 0.85);

  /* Border / Divider Colors */
  --hd-border: oklch(0.20 0.012 235 / 0.8);
  --hd-border-glass: rgba(255, 255, 255, 0.06);
  --hd-border-glass-active: rgba(255, 255, 255, 0.15);

  /* Text Colors */
  --hd-text-main: #f3f4f6;
  --hd-text-muted: #9ca3af;
  --hd-text-dim: #6b7280;

  /* UI Statuses */
  --hd-status-airing: #22c55e;
  --hd-status-completed: #3b82f6;
  --hd-status-airing-glow: rgba(34, 197, 94, 0.2);
  --hd-status-completed-glow: rgba(59, 130, 246, 0.25);
  --hd-rating-yellow: oklch(0.79 0.21 75);

  /* Fonts */
  --hd-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --hd-font-display: 'Outfit', var(--hd-font-primary);
  
  /* Typography Scale */
  --hd-text-xs: 0.75rem;     /* 12px */
  --hd-text-sm: 14px;        /* 14px as requested */
  --hd-text-base: 1rem;      /* 16px */
  --hd-text-md: 16px;        /* 16px as requested */
  --hd-text-lg: 1.25rem;     /* 20px */
  --hd-text-xl: 1.5rem;      /* 24px */
  --hd-text-2xl: 1.875rem;   /* 30px */
  --hd-text-3xl: 2.25rem;    /* 36px */
  --hd-text-4xl: 3rem;       /* 48px */

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

  /* Border Radius */
  --hd-radius-xs: 4px;
  --hd-radius-sm: 8px;
  --hd-radius-md: 12px;
  --hd-radius-lg: 20px;       /* 20px as requested */
  --hd-radius-xl: 24px;
  --hd-radius-full: 9999px;

  /* Shadows */
  --hd-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --hd-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6);
  --hd-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.75);
  --hd-shadow-xl: 0 20px 50px -10px rgba(0, 0, 0, 0.9);
  
  /* Accent Glows */
  --hd-glow-primary: 0 0 15px var(--hd-primary-glow);
  --hd-glow-accent: 0 0 15px var(--hd-accent-glow);

  /* Spacing Scale */
  --hd-spacing-xxs: 0.25rem;  /* 4px */
  --hd-spacing-xs: 0.5rem;    /* 8px */
  --hd-spacing-sm: 0.75rem;   /* 12px */
  --hd-spacing-md: 1rem;      /* 16px */
  --hd-spacing-lg: 1.5rem;     /* 24px */
  --hd-spacing-xl: 2rem;      /* 32px */
  --hd-spacing-xxl: 3rem;     /* 48px */
  --hd-spacing-3xl: 4rem;     /* 64px */

  /* Page Layout Widths */
  --hd-container-width: 1400px;

  /* Motion Speeds */
  --hd-duration-fast: 150ms;
  --hd-duration-normal: 250ms;
  --hd-duration-slow: 400ms;
  --hd-duration-cinematic: 600ms;

  /* Easing Functions */
  --hd-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --hd-ease-in-out: cubic-bezier(0.87, 0, 0.13, 1);
  --hd-ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
  
  /* Transitions */
  --hd-transition-all: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --hd-transition-transform: transform var(--hd-duration-normal) var(--hd-ease-out);
  --hd-transition-fade: opacity var(--hd-duration-normal) var(--hd-ease-out);
}