:root {
  /* Type */
  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --fs-100: 0.75rem;   /* 12 */
  --fs-200: 0.875rem;  /* 14 */
  --fs-300: 1rem;      /* 16 */
  --fs-400: 1.25rem;   /* 20 */
  --fs-500: 1.5rem;    /* 24 */
  --fs-600: 2rem;      /* 32 */
  --fs-700: 3rem;      /* 48 */
  --fs-800: 4rem;      /* 64 */

  /* Spacing (4px base) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Fixed accent — used for the 3D glass illustration's straw + glow, not theme-switched */
  --neon-pink: #FF2E9A;
  --neon-pink-soft: rgba(255, 46, 154, 0.35);

  /* Motion */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 150ms;
  --dur-med: 260ms;
  --dur-slow: 600ms;

  /* Light theme (default) */
  --bg: #F3FAFB;
  --bg-elevated: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #E7F4F6;
  --surface-3: #DCEFF2;
  --border: #D3E7EA;
  --ink: #0B2027;
  --ink-muted: #546F76;
  --ink-faint: #6E9096;

  --accent: #078093;
  --accent-strong: #045E6B;
  --accent-soft: #CFF1F5;
  --accent-contrast: #FFFFFF;

  --warm: #C02E00;
  --warm-soft: #FFE3D6;
  --success: #1FA37B;
  --success-soft: #D6F3E7;
  --danger: #B33A17;
  --danger-soft: #FBE0D8;

  --shadow-color: 191, 224, 230;
  --shadow-sm: 0 1px 2px rgba(11, 32, 39, 0.06);
  --shadow-md: 0 8px 24px -8px rgba(8, 105, 122, 0.28);
  --shadow-lg: 0 20px 48px -16px rgba(8, 105, 122, 0.35);

  --scrim: rgba(6, 24, 29, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #071417;
    --bg-elevated: #0C1F24;
    --surface: #0F2429;
    --surface-2: #123037;
    --surface-3: #163A42;
    --border: #1C4048;
    --ink: #EAF7F9;
    --ink-muted: #93B6BC;
    --ink-faint: #5E848A;

    --accent: #2DD4EE;
    --accent-strong: #7CE6F7;
    --accent-soft: #10373E;
    --accent-contrast: #06222A;

    --warm: #FF9166;
    --warm-soft: #3A2318;
    --success: #34D399;
    --success-soft: #123529;
    --danger: #F0724A;
    --danger-soft: #3A1E16;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 24px 56px -16px rgba(0, 0, 0, 0.6);
    --scrim: rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  --bg: #071417;
  --bg-elevated: #0C1F24;
  --surface: #0F2429;
  --surface-2: #123037;
  --surface-3: #163A42;
  --border: #1C4048;
  --ink: #EAF7F9;
  --ink-muted: #93B6BC;
  --ink-faint: #5E848A;

  --accent: #2DD4EE;
  --accent-strong: #7CE6F7;
  --accent-soft: #10373E;
  --accent-contrast: #06222A;

  --warm: #FF9166;
  --warm-soft: #3A2318;
  --success: #34D399;
  --success-soft: #123529;
  --danger: #F0724A;
  --danger-soft: #3A1E16;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 24px 56px -16px rgba(0, 0, 0, 0.6);
  --scrim: rgba(0, 0, 0, 0.6);
}