:root {
  color-scheme: light dark;

  /* Light mode surfaces */
  --background: #faf9fe;
  --surface: #ffffff;
  --surface-bright: #faf9fe;
  --surface-dim: #dad9df;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f4f3f8;
  --surface-container: #eeedf3;
  --surface-container-high: #e9e7ed;
  --surface-container-highest: #e3e2e7;
  --surface-variant: #e3e2e7;
  --on-surface: #1a1b1f;
  --on-surface-variant: #444748;
  --on-background: #1a1b1f;
  --inverse-surface: #2f3034;
  --inverse-on-surface: #f1f0f5;

  /* Primary/secondary/tertiary */
  --primary: #000000;
  --on-primary: #ffffff;
  --primary-container: #1c1b1b;
  --on-primary-container: #858383;
  --inverse-primary: #c8c6c5;
  --secondary: #5d5e63;
  --on-secondary: #ffffff;
  --secondary-container: #dfdfe4;
  --on-secondary-container: #616267;
  --tertiary: #000000;
  --on-tertiary: #ffffff;
  --tertiary-container: #1a1c1f;
  --on-tertiary-container: #828488;

  /* Outlines and accents */
  --outline: #747878;
  --outline-variant: #c4c7c7;
  --surface-tint: #5f5e5e;
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;

  /* Fixed colors (both modes) */
  --primary-fixed: #e5e2e1;
  --primary-fixed-dim: #c8c6c5;
  --on-primary-fixed: #1c1b1b;
  --on-primary-fixed-variant: #474746;
  --secondary-fixed: #e2e2e7;
  --secondary-fixed-dim: #c6c6cb;
  --on-secondary-fixed: #1a1c1f;
  --on-secondary-fixed-variant: #45474b;
  --tertiary-fixed: #e2e2e7;
  --tertiary-fixed-dim: #c6c6cb;
  --on-tertiary-fixed: #1a1c1f;
  --on-tertiary-fixed-variant: #45474b;

  /* Convenience aliases for existing usage */
  --text: var(--on-surface);
  --text-muted: var(--on-surface-variant);
  --surface-low: var(--surface-container-low);
  --surface-high: var(--surface-container-high);

  /* Typography */
  --font-display: 'Manrope', sans-serif;
  --font-body: 'Inter', sans-serif;

  --headline-lg: 700 2rem/2.5rem var(--font-display);
  --headline-lg-mobile: 700 1.625rem/2rem var(--font-display);
  --headline-md: 600 1.25rem/1.75rem var(--font-display);
  --price-display: 700 1.25rem/1.75rem var(--font-display);
  --body-lg: 400 1rem/1.5rem var(--font-body);
  --body-md: 400 0.875rem/1.25rem var(--font-body);
  --label-md: 600 0.75rem/1rem var(--font-body);

  --letter-spacing-headline: -0.02em;
  --letter-spacing-headline-md: -0.01em;
  --letter-spacing-label: 0.05em;

  /* Spacing */
  --space-base: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --container-margin: 1.25rem;
  --page-gutter: var(--container-margin);
  --gutter: 0.75rem;

  /* Shapes */
  --radius-sm: 0.25rem;
  --radius-default: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Elevation / glass */
  --glass-bg-light: rgb(255 255 255 / 70%);
  --glass-stroke-light: rgb(255 255 255 / 10%);
  --glass-bg-dark: rgb(28 28 30 / 78%);
  --glass-stroke-dark: rgb(255 255 255 / 10%);
  --glass: var(--glass-bg-light);
  --glass-border: var(--glass-stroke-light);
  --glass-border-visible: rgb(0 0 0 / 8%);
  --glass-blur: blur(20px);
  --glass-2: rgb(255 255 255 / 85%);
  --glass-2-blur: blur(40px);
  --shadow-modal: 0 10px 30px rgb(0 0 0 / 4%);
  --shadow-dock: 0 4px 12px rgb(0 0 0 / 8%), 0 12px 40px rgb(0 0 0 / 6%);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #000000;
  --surface: #1c1c1e;
  --surface-bright: #1c1c1e;
  --surface-dim: #141416;
  --surface-container-lowest: #000000;
  --surface-container-low: #141416;
  --surface-container: #252529;
  --surface-container-high: #2c2c30;
  --surface-container-highest: #36363a;
  --surface-variant: #36363a;
  --on-surface: #f1f0f5;
  --on-surface-variant: #c8c6c5;
  --on-background: #f1f0f5;
  --inverse-surface: #2f3034;
  --inverse-on-surface: #f1f0f5;
  --primary: #ffffff;
  --on-primary: #1a1a1a;
  --primary-container: #e5e2e1;
  --on-primary-container: #1c1b1b;
  --inverse-primary: #000000;
  --secondary: #c8c6c5;
  --on-secondary: #1a1a1a;
  --secondary-container: #444748;
  --on-secondary-container: #dfdfe4;
  --tertiary: #ffffff;
  --on-tertiary: #1a1a1a;
  --tertiary-container: #444748;
  --on-tertiary-container: #e2e2e7;
  --outline: #747878;
  --outline-variant: #444748;
  --surface-tint: #5f5e5e;
  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #93000a;
  --on-error-container: #ffdad6;
  --glass: var(--glass-bg-dark);
  --glass-border: var(--glass-stroke-dark);
  --glass-border-visible: rgb(255 255 255 / 12%);
  --glass-2: rgb(28 28 30 / 85%);
  --shadow-dock: 0 4px 12px rgb(0 0 0 / 24%), 0 12px 40px rgb(0 0 0 / 16%);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --background: #000000;
    --surface: #1c1c1e;
    --surface-bright: #1c1c1e;
    --surface-dim: #141416;
    --surface-container-lowest: #000000;
    --surface-container-low: #141416;
    --surface-container: #252529;
    --surface-container-high: #2c2c30;
    --surface-container-highest: #36363a;
    --surface-variant: #36363a;
    --on-surface: #f1f0f5;
    --on-surface-variant: #c8c6c5;
    --on-background: #f1f0f5;
    --inverse-surface: #2f3034;
    --inverse-on-surface: #f1f0f5;
    --primary: #ffffff;
    --on-primary: #1a1a1a;
    --primary-container: #e5e2e1;
    --on-primary-container: #1c1b1b;
    --inverse-primary: #000000;
    --secondary: #c8c6c5;
    --on-secondary: #1a1a1a;
    --secondary-container: #444748;
    --on-secondary-container: #dfdfe4;
    --tertiary: #ffffff;
    --on-tertiary: #1a1a1a;
    --tertiary-container: #444748;
    --on-tertiary-container: #e2e2e7;
    --outline: #747878;
    --outline-variant: #444748;
    --surface-tint: #5f5e5e;
    --error: #ffb4ab;
    --on-error: #690005;
    --error-container: #93000a;
    --on-error-container: #ffdad6;
    --glass: var(--glass-bg-dark);
    --glass-border: var(--glass-stroke-dark);
    --glass-border-visible: rgb(255 255 255 / 12%);
    --glass-2: rgb(28 28 30 / 85%);
    --shadow-dock: 0 4px 12px rgb(0 0 0 / 24%), 0 12px 40px rgb(0 0 0 / 16%);
  }
}