:root {
  /* Base theme: Ocean */
  --palette-cream: #F6F4EB;
  --palette-sky: #91C8E4;
  --palette-steel: #749BC2;
  --palette-deep-blue: #4682A9;

  /* Color system */
  --color-primary: var(--palette-steel);
  --color-primary-hover: var(--palette-deep-blue);
  --color-primary-contrast: #FFFFFF;

  --color-secondary: var(--palette-sky);
  --color-secondary-hover: var(--palette-steel);

  --color-success: var(--palette-deep-blue);
  --color-success-muted: #4682A91F;
  --color-error: var(--palette-deep-blue);
  --color-error-muted: #749BC21A;

  --color-background: var(--palette-cream);
  --color-surface: #FFFFFF;
  --color-surface-muted: #F1F8FC;
  --color-surface-overlay: #F6F4EBE0;
  --color-border: #749BC266;
  --color-border-strong: #4682A980;

  --color-text: var(--palette-deep-blue);
  --color-text-muted: #4682A9CC;
  --color-secondary-contrast: var(--color-text);

  --color-primary-soft: #4682A914;
  --color-secondary-soft: #91C8E424;

  /* Typography */
  --font-body: "Manrope", system-ui, sans-serif;
  --font-heading: "Space Grotesk", "Manrope", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Layout */
  --layout-max-width: 72rem;
  --layout-content-width: 64rem;
  --panel-width-sm: 32rem;
  --panel-width-md: 44rem;
  --panel-width-lg: 52rem;

  /* Spacing */
  --spacing-2xs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-pill: 999px;

  /* Effects */
  --shadow-sm: 0 1px 2px #4682A914;
  --shadow-md: 0 10px 24px #4682A924;
  --shadow-lg: 0 24px 50px #4682A933;

  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;

  /* Layering */
  --z-fixed: 200;
  --z-modal: 400;
}

:root[data-theme="light"] {
  /* Light palette (white + black) */
  --palette-cream: #FFFFFF;
  --palette-sky: #F3F3F3;
  --palette-steel: #000000;
  --palette-deep-blue: #1A1A1A;

  --color-primary: var(--palette-steel);
  --color-primary-hover: var(--palette-deep-blue);
  --color-primary-contrast: #FFFFFF;

  --color-secondary: var(--palette-sky);
  --color-secondary-hover: #E5E5E5;

  --color-success: var(--palette-steel);
  --color-success-muted: #00000014;
  --color-error: var(--palette-steel);
  --color-error-muted: #0000001A;

  --color-background: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-muted: #F7F7F7;
  --color-surface-overlay: #FFFFFFE0;
  --color-border: #00000033;
  --color-border-strong: #00000066;

  --color-text: #000000;
  --color-text-muted: #000000B3;
  --color-secondary-contrast: var(--color-text);

  --color-primary-soft: #00000014;
  --color-secondary-soft: #0000000D;

  --shadow-sm: 0 1px 2px #00000014;
  --shadow-md: 0 10px 24px #00000024;
  --shadow-lg: 0 24px 50px #00000033;
}

:root[data-theme="dark"] {
  /* Dark palette (black + white) */
  --palette-cream: #000000;
  --palette-sky: #141414;
  --palette-steel: #FFFFFF;
  --palette-deep-blue: #E5E5E5;

  --color-primary: #FFFFFF;
  --color-primary-hover: #E5E5E5;
  --color-primary-contrast: #000000;

  --color-secondary: #1F1F1F;
  --color-secondary-hover: #2A2A2A;

  --color-success: #FFFFFF;
  --color-success-muted: #FFFFFF1F;
  --color-error: #FFFFFF;
  --color-error-muted: #FFFFFF1A;

  --color-background: #000000;
  --color-surface: #0F0F0F;
  --color-surface-muted: #1A1A1A;
  --color-surface-overlay: #000000E0;
  --color-border: #FFFFFF33;
  --color-border-strong: #FFFFFF66;

  --color-text: #FFFFFF;
  --color-text-muted: #FFFFFFB3;
  --color-secondary-contrast: var(--color-text);

  --color-primary-soft: #FFFFFF1F;
  --color-secondary-soft: #FFFFFF14;

  --shadow-sm: 0 1px 2px #00000080;
  --shadow-md: 0 10px 24px #00000099;
  --shadow-lg: 0 24px 50px #000000B3;
}

:root[data-theme="sunset"] {
  /* Sunset palette */
  --palette-cream: #F9ED69;
  --palette-sky: #F08A5D;
  --palette-steel: #B83B5E;
  --palette-deep-blue: #6A2C70;

  --color-primary: var(--palette-steel);
  --color-primary-hover: var(--palette-deep-blue);
  --color-secondary: var(--palette-sky);
  --color-secondary-hover: var(--palette-steel);

  --color-success: var(--palette-deep-blue);
  --color-success-muted: #6A2C701F;
  --color-error: var(--palette-steel);
  --color-error-muted: #B83B5E1A;

  --color-background: var(--palette-cream);
  --color-surface: #FFFDF0;
  --color-surface-muted: #FFF7D6;
  --color-surface-overlay: #FFFDF0E0;
  --color-border: #B83B5E66;
  --color-border-strong: #B83B5E80;

  --color-text: var(--palette-deep-blue);
  --color-text-muted: #6A2C70CC;
  --color-secondary-contrast: var(--color-text);

  --color-primary-soft: #B83B5E14;
  --color-secondary-soft: #F08A5D1A;

  --shadow-sm: 0 1px 2px #6A2C7014;
  --shadow-md: 0 10px 24px #6A2C7024;
  --shadow-lg: 0 24px 50px #6A2C7033;
}

:root[data-theme="petal"] {
  /* Petal palette */
  --palette-cream: #F9F5F6;
  --palette-sky: #F8E8EE;
  --palette-steel: #FDCEDF;
  --palette-deep-blue: #F2BED1;

  --color-primary: var(--palette-steel);
  --color-primary-hover: var(--palette-deep-blue);
  --color-primary-contrast: #5A2E43;

  --color-secondary: var(--palette-sky);
  --color-secondary-hover: var(--palette-deep-blue);

  --color-success: #A85E7D;
  --color-success-muted: #A85E7D1F;
  --color-error: #B96889;
  --color-error-muted: #B968891A;

  --color-background: var(--palette-cream);
  --color-surface: #FFFFFF;
  --color-surface-muted: #FDF3F7;
  --color-surface-overlay: #F9F5F6E0;
  --color-border: #F2BED166;
  --color-border-strong: #F2BED180;

  --color-text: #5A2E43;
  --color-text-muted: #5A2E43CC;
  --color-secondary-contrast: var(--color-text);

  --color-primary-soft: #FDCEDF33;
  --color-secondary-soft: #F8E8EE66;

  --shadow-sm: 0 1px 2px #5A2E4314;
  --shadow-md: 0 10px 24px #5A2E4324;
  --shadow-lg: 0 24px 50px #5A2E4333;
}

:root[data-theme="neon"] {
  /* Neon palette */
  --palette-cream: #08D9D6;
  --palette-sky: #252A34;
  --palette-steel: #FF2E63;
  --palette-deep-blue: #EAEAEA;

  --color-primary: var(--palette-steel);
  --color-primary-hover: #E42558;
  --color-primary-contrast: #252A34;

  --color-secondary: var(--palette-cream);
  --color-secondary-hover: #06C3C0;

  --color-success: #252A34;
  --color-success-muted: #252A341F;
  --color-error: var(--palette-steel);
  --color-error-muted: #FF2E631A;

  --color-background: var(--palette-deep-blue);
  --color-surface: #FFFFFF;
  --color-surface-muted: #F4F5F7;
  --color-surface-overlay: #EAEAEAE0;
  --color-border: #252A3466;
  --color-border-strong: #252A3480;

  --color-text: var(--palette-sky);
  --color-text-muted: #252A34CC;
  --color-secondary-contrast: var(--color-text);

  --color-primary-soft: #FF2E631F;
  --color-secondary-soft: #08D9D624;

  --shadow-sm: 0 1px 2px #252A3414;
  --shadow-md: 0 10px 24px #252A3424;
  --shadow-lg: 0 24px 50px #252A3433;
}

:root[data-theme="pastel"] {
  /* Pastel palette */
  --palette-cream: #CDF0EA;
  --palette-sky: #F9F9F9;
  --palette-steel: #F7DBF0;
  --palette-deep-blue: #BEAEE2;

  --color-primary: var(--palette-deep-blue);
  --color-primary-hover: #A48CD8;
  --color-primary-contrast: #3F315E;

  --color-secondary: var(--palette-cream);
  --color-secondary-hover: #BDE3DC;

  --color-success: #6B5B95;
  --color-success-muted: #6B5B951F;
  --color-error: #A16B93;
  --color-error-muted: #A16B931A;

  --color-background: var(--palette-sky);
  --color-surface: #FFFFFF;
  --color-surface-muted: #FCF8FD;
  --color-surface-overlay: #F9F9F9E0;
  --color-border: #BEAEE266;
  --color-border-strong: #BEAEE280;

  --color-text: #4D3F73;
  --color-text-muted: #4D3F73CC;
  --color-secondary-contrast: var(--color-text);

  --color-primary-soft: #BEAEE22E;
  --color-secondary-soft: #CDF0EA33;

  --shadow-sm: 0 1px 2px #4D3F7314;
  --shadow-md: 0 10px 24px #4D3F7324;
  --shadow-lg: 0 24px 50px #4D3F7333;
}

:root[data-theme="lagoon"] {
  /* Lagoon palette */
  --palette-cream: #F6F1F1;
  --palette-sky: #AFD3E2;
  --palette-steel: #19A7CE;
  --palette-deep-blue: #146C94;

  --color-primary: var(--palette-steel);
  --color-primary-hover: var(--palette-deep-blue);
  --color-primary-contrast: #0D3A52;

  --color-secondary: var(--palette-sky);
  --color-secondary-hover: var(--palette-steel);

  --color-success: var(--palette-deep-blue);
  --color-success-muted: #146C941F;
  --color-error: var(--palette-steel);
  --color-error-muted: #19A7CE1A;

  --color-background: var(--palette-cream);
  --color-surface: #FFFFFF;
  --color-surface-muted: #EDF6FA;
  --color-surface-overlay: #F6F1F1E0;
  --color-border: #19A7CE66;
  --color-border-strong: #146C9480;

  --color-text: var(--palette-deep-blue);
  --color-text-muted: #146C94CC;
  --color-secondary-contrast: var(--color-text);

  --color-primary-soft: #19A7CE1F;
  --color-secondary-soft: #AFD3E233;

  --shadow-sm: 0 1px 2px #146C9414;
  --shadow-md: 0 10px 24px #146C9424;
  --shadow-lg: 0 24px 50px #146C9433;
}

:root[data-theme="crimson"] {
  /* Crimson palette */
  --palette-cream: #FF204E;
  --palette-sky: #A0153E;
  --palette-steel: #5D0E41;
  --palette-deep-blue: #00224D;

  --color-primary: var(--palette-cream);
  --color-primary-hover: var(--palette-sky);
  --color-primary-contrast: #FFFFFF;

  --color-secondary: var(--palette-steel);
  --color-secondary-hover: var(--palette-sky);

  --color-success: var(--palette-cream);
  --color-success-muted: #FF204E1F;
  --color-error: var(--palette-sky);
  --color-error-muted: #A0153E1A;

  --color-background: var(--palette-deep-blue);
  --color-surface: #0C315F;
  --color-surface-muted: #16406E;
  --color-surface-overlay: #00224DE0;
  --color-border: #FF204E66;
  --color-border-strong: #A0153E80;

  --color-text: #FFFFFF;
  --color-text-muted: #FFFFFFCC;
  --color-secondary-contrast: var(--color-text);

  --color-primary-soft: #FF204E24;
  --color-secondary-soft: #A0153E2E;

  --shadow-sm: 0 1px 2px #0000003D;
  --shadow-md: 0 10px 24px #0000004D;
  --shadow-lg: 0 24px 50px #00000066;
}