:root {
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --safe-top: max(14px, env(safe-area-inset-top));
  --safe-bottom: max(16px, env(safe-area-inset-bottom));
  --sheet-peek: 108px;
  --sheet-mid: 56svh;
  --sheet-full: 88svh;
  --hero-left: 12px;
  --hero-top: var(--safe-top);
  --hero-width: min(760px, calc(100% - 24px));
}

html[data-theme="ocean"] {
  --color-text: #edfafd;
  --color-text-strong: #07141a;
  --color-text-muted: rgba(237, 250, 253, 0.72);
  --color-text-soft: rgba(237, 250, 253, 0.56);
  --color-accent: #5eead4;
  --color-accent-2: #38bdf8;
  --color-white-95: rgba(247, 254, 255, 0.95);
  --color-white-16: rgba(247, 254, 255, 0.16);
  --color-white-12: rgba(247, 254, 255, 0.12);
  --color-white-08: rgba(247, 254, 255, 0.08);
  --color-white-06: rgba(247, 254, 255, 0.06);
  --color-white-05: rgba(247, 254, 255, 0.05);
  --color-white-04: rgba(247, 254, 255, 0.04);
  --color-white-03: rgba(247, 254, 255, 0.03);
  --surface: rgba(8, 24, 31, 0.66);
  --surface-strong: rgba(8, 21, 27, 0.82);
  --line: rgba(247, 254, 255, 0.12);
  --overlay-a: rgba(94, 234, 212, 0.18);
  --overlay-b: rgba(56, 189, 248, 0.14);
  --pin-ring: rgba(94, 234, 212, 0.14);
  --pin-ring-2: rgba(94, 234, 212, 0.10);
  --button-glow: rgba(94, 234, 212, 0.22);
  --shadow-color: rgba(0, 0, 0, 0.35);
  --gradient-body: linear-gradient(180deg, #06161d 0%, #0a2029 36%, #06161d 100%);
  --gradient-brand: linear-gradient(135deg, rgba(94, 234, 212, 0.28), rgba(56, 189, 248, 0.30));
  --gradient-accent: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
}

html[data-theme="gold"] {
  --color-text: #f8f1e6;
  --color-text-strong: #17120c;
  --color-text-muted: rgba(248, 241, 230, 0.72);
  --color-text-soft: rgba(248, 241, 230, 0.56);
  --color-accent: #d6b25e;
  --color-accent-2: #f3d98a;
  --color-white-95: rgba(255, 248, 238, 0.95);
  --color-white-16: rgba(255, 248, 238, 0.16);
  --color-white-12: rgba(255, 248, 238, 0.12);
  --color-white-08: rgba(255, 248, 238, 0.08);
  --color-white-06: rgba(255, 248, 238, 0.06);
  --color-white-05: rgba(255, 248, 238, 0.05);
  --color-white-04: rgba(255, 248, 238, 0.04);
  --color-white-03: rgba(255, 248, 238, 0.03);
  --surface: rgba(19, 16, 11, 0.66);
  --surface-strong: rgba(18, 15, 10, 0.82);
  --line: rgba(255, 248, 238, 0.12);
  --overlay-a: rgba(214, 178, 94, 0.18);
  --overlay-b: rgba(243, 217, 138, 0.14);
  --pin-ring: rgba(214, 178, 94, 0.14);
  --pin-ring-2: rgba(214, 178, 94, 0.10);
  --button-glow: rgba(214, 178, 94, 0.22);
  --shadow-color: rgba(0, 0, 0, 0.38);
  --gradient-body: linear-gradient(180deg, #12100c 0%, #1b1711 36%, #12100c 100%);
  --gradient-brand: linear-gradient(135deg, rgba(214, 178, 94, 0.28), rgba(243, 217, 138, 0.30));
  --gradient-accent: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
}