:root {
  /* Color - light mode (default) */
  --color-primary-color: hsl(30, 99%, 51%);
  --color-on-primary-color: hsl(0, 0%, 100%);
  --color-primary-container-color: hsl(24, 100%, 76%);
  --color-on-primary-container-color: hsl(28, 100%, 22%);
  --color-secondary-color: hsl(31, 58%, 32%);
  --color-on-secondary-color: hsl(0, 0%, 100%);
  --color-secondary-container-color: hsl(29, 88%, 74%);
  --color-on-secondary-container-color: hsl(32, 77%, 23%);
  --color-tertiary-color: hsl(32, 100%, 28%);
  --color-on-tertiary-color: hsl(0, 0%, 100%);
  --color-tertiary-container-color: hsl(27, 100%, 75%);
  --color-on-tertiary-container-color: hsl(31, 100%, 22%);
  --color-error-color: hsl(5, 82%, 40%);
  --color-on-error-color: hsl(0, 0%, 100%);
  --color-error-container-color: hsl(9, 100%, 83%);
  --color-on-error-container-color: hsl(2, 100%, 29%);
  --color-field-success-bg: hsl(30, 14%, 33%);
  --color-field-success-border: rgba(255, 255, 255, 0.25);
  --color-background-color: hsl(22, 100%, 98%);
  --color-on-background-color: hsl(32, 37%, 10%);
  --color-surface-color: hsl(22, 100%, 98%);
  --color-on-surface-color: hsl(32, 37%, 10%);
  --color-surface-variant-color: hsl(27, 87%, 88%);
  --color-on-surface-variant-color: hsl(28, 28%, 27%);
  --color-outline-color: hsl(29, 19%, 45%);
  --color-outline-variant-color: hsl(27, 44%, 77%);
  --color-inverse-surface-color: hsl(33, 24%, 18%);
  --color-inverse-on-surface-color: hsl(29, 100%, 94%);
  --color-inverse-primary-color: hsl(24, 100%, 76%);
  --color-surface-dim-color: hsl(29, 44%, 85%);
  --color-surface-bright-color: hsl(22, 100%, 98%);
  --color-surface-container-lowest-color: hsl(0, 0%, 100%);
  --color-surface-container-low-color: hsl(26, 100%, 95%);
  --color-surface-container-color: hsl(29, 90%, 92%);
  --color-surface-container-high-color: hsl(28, 72%, 90%);
  --color-surface-container-highest-color: hsl(28, 58%, 88%);

  /* Typography */
  --font-sans: "IBM Plex Sans";
  --font-display: Fraunces;
  --font-mono: "IBM Plex Mono";
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  --font-size-7xl: 4.5rem;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  --line-height-none: 1;
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;

  /* Spacing */
  --spacing-0: 0;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-7: 1.75rem;
  --spacing-8: 2rem;
  --spacing-9: 2.25rem;
  --spacing-10: 2.5rem;
  --spacing-11: 2.75rem;
  --spacing-12: 3rem;
  --spacing-14: 3.5rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  --spacing-28: 7rem;
  --spacing-32: 8rem;
  --spacing-36: 9rem;
  --spacing-40: 10rem;
  --spacing-44: 11rem;
  --spacing-48: 12rem;
  --spacing-52: 13rem;
  --spacing-56: 14rem;
  --spacing-60: 15rem;
  --spacing-64: 16rem;
  --spacing-72: 18rem;
  --spacing-80: 20rem;
  --spacing-96: 24rem;
  --spacing-px: 1px;
  --spacing-0_5: 0.125rem;
  --spacing-1_5: 0.375rem;
  --spacing-2_5: 0.625rem;
  --spacing-3_5: 0.875rem;

  /* Border Radius */
  --radius-none: 0;
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.03);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.10), 0 8px 10px rgba(0,0,0,0.04);
  --shadow-2xl: 0 25px 50px rgba(0,0,0,0.15);
  --shadow-inner: inset 0 2px 4px rgba(0,0,0,0.05);
  --shadow-glow-primary: 0 0 20px hsla(256, 34%, 48%, 0.35);
  --shadow-glow-secondary: 0 0 20px hsla(259, 11%, 40%, 0.35);
  --shadow-glow-tertiary: 0 0 20px hsla(340, 21%, 41%, 0.35);
  --shadow-glow-error: 0 0 20px hsla(0, 54%, 41%, 0.35);

  /* Elevation */
  --elevation-0: none;
  --elevation-1: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --elevation-2: 0 3px 6px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
  --elevation-3: 0 6px 12px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.06);
  --elevation-4: 0 10px 20px rgba(0,0,0,0.12), 0 3px 6px rgba(0,0,0,0.06);
  --elevation-5: 0 15px 30px rgba(0,0,0,0.14), 0 5px 10px rgba(0,0,0,0.08);
}

[data-theme="dark"] {
  /* Color - dark mode (explicit, opt-in override — not wired to any toggle yet) */
  --color-primary-color: hsl(30, 99%, 51%);
  --color-on-primary-color: hsl(27, 100%, 16%);
  --color-primary-container-color: hsl(28, 100%, 22%);
  --color-on-primary-container-color: hsl(23, 100%, 89%);
  --color-secondary-color: hsl(29, 88%, 74%);
  --color-on-secondary-color: hsl(32, 100%, 15%);
  --color-secondary-container-color: hsl(32, 77%, 23%);
  --color-on-secondary-container-color: hsl(28, 100%, 87%);
  --color-tertiary-color: hsl(27, 100%, 75%);
  --color-on-tertiary-color: hsl(30, 100%, 15%);
  --color-tertiary-container-color: hsl(31, 100%, 22%);
  --color-on-tertiary-container-color: hsl(25, 100%, 88%);
  --color-error-color: hsl(5, 100%, 80%);
  --color-on-error-color: hsl(5, 100%, 20%);
  --color-error-container-color: hsl(5, 100%, 30%);
  --color-on-error-container-color: hsl(5, 70%, 90%);
  --color-field-success-bg: hsl(30, 14%, 33%);
  --color-field-success-border: rgba(255, 255, 255, 0.25);
  --color-background-color: hsl(32, 37%, 6%);
  --color-on-background-color: hsl(28, 58%, 88%);
  --color-surface-color: hsl(32, 37%, 6%);
  --color-on-surface-color: hsl(28, 58%, 88%);
  --color-surface-variant-color: hsl(28, 28%, 27%);
  --color-on-surface-variant-color: hsl(27, 44%, 77%);
  --color-outline-color: hsl(28, 21%, 55%);
  --color-outline-variant-color: hsl(28, 28%, 27%);
  --color-inverse-surface-color: hsl(28, 58%, 88%);
  --color-inverse-on-surface-color: hsl(33, 24%, 18%);
  --color-inverse-primary-color: hsl(29, 100%, 29%);
  --color-surface-dim-color: hsl(32, 37%, 4%);
  --color-surface-bright-color: hsl(32, 37%, 24%);
  --color-surface-container-lowest-color: hsl(32, 37%, 8%);
  --color-surface-container-low-color: hsl(32, 37%, 10%);
  --color-surface-container-color: hsl(32, 37%, 12%);
  --color-surface-container-high-color: hsl(32, 37%, 15%);
  --color-surface-container-highest-color: hsl(32, 37%, 18%);
}