:root {
  /* Colors - Primary */
  --color-bg-primary: #060b16;
  --color-bg-section-dark: #0b1220;
  --color-bg-section-light: #10192d;
  --color-bg-hero: linear-gradient(135deg, #081120 0%, #101d34 60%, #1a2442 100%);
  --color-bg-header: rgba(6, 11, 22, 0.85);

  /* Colors - Accent */
  --color-accent: #ff005d;
  --color-accent-light: #ff5d94;
  --color-accent-hover: #ff2d78;
  --color-accent-gradient: linear-gradient(90deg, #ff005d, #ff5d94);
  --color-accent-glow: rgba(255, 0, 93, 0.15);

  /* Colors - Text */
  --color-text-primary: #ffffff;
  --color-text-secondary: #d6d9e0;
  --color-text-muted: #c9d1e5;
  --color-text-subtle: #aab3c7;

  /* Colors - Borders & Cards */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(255, 0, 93, 0.5);
  --color-card-bg: rgba(255, 255, 255, 0.04);

  /* Typography */
  --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-size-base: 1.1rem;
  --font-size-small: 0.9rem;
  --font-size-h1: 3.5rem;
  --font-size-h2: 2.5rem;
  --font-size-h3: 1.6rem;
  --font-size-subtitle: 1.4rem;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --line-height: 1.6;

  /* Spacing */
  --section-padding-y: 100px;
  --section-padding-x: 10%;
  --gap-cards: 30px;
  --gap-small: 15px;

  /* Cards */
  --card-radius: 24px;
  --card-padding: 35px;
  --card-border: 1px solid var(--color-border);
  --card-blur: blur(10px);

  /* Effects */
  --transition-default: all 0.3s ease;
  --transition-fast: all 0.2s ease;
  --shadow-glow: 0 15px 40px var(--color-accent-glow);
  --shadow-card-hover: 0 15px 40px rgba(255, 0, 93, 0.15);

  /* CTA */
  --cta-radius: 999px;
  --cta-padding: 16px 32px;

  /* Header */
  --header-height: 70px;
  --header-blur: blur(12px);

  /* Breakpoints (documented, used in responsive.css) */
  /* --bp-tablet: 768px */
  /* --bp-desktop: 1200px */

  /* Animation */
  --animation-duration: 0.6s;
  --animation-delay: 0.1s;
  --animation-distance: 30px;
}