:root {
  color-scheme: dark;
  --ground: #070f11;
  --ground-deep: #04090a;
  --surface: #0f1c1f;
  --surface-raised: #142a2d;
  --surface-glass: rgba(15, 28, 31, 0.88);
  --scrim: rgba(3, 7, 8, 0.72);
  --ink: #f2fbfa;
  --ink-soft: #c1d3d3;
  --ink-muted: #7d9698;
  --ember: #22cfb8;
  --ember-bright: #5ffbee;
  --ember-wash: rgba(34, 207, 184, 0.12);
  --ember-line: rgba(34, 207, 184, 0.28);
  --line: rgba(240, 250, 249, 0.09);
  --line-strong: rgba(240, 250, 249, 0.16);
  --success: #4ee0a8;
  --success-wash: rgba(78, 224, 168, 0.12);
  --danger: #ff7d71;
  --shadow-one: 0 0 0 1px var(--line), 0 8px 22px rgba(5, 2, 6, 0.28);
  --shadow-two: 0 0 0 1px var(--ember-line), 0 22px 60px rgba(5, 2, 6, 0.5);
  --radius-control: 12px;
  --radius-media: 18px;
  --radius-sheet: 24px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --header-height: 76px;
  --tabbar-height: 76px;
  --shell: 1180px;
  --pad: clamp(16px, 4vw, 32px);
  --font-ui: "Ember Sans", "Noto Sans Thai", system-ui, sans-serif;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --z-header: 30;
  --z-bar: 40;
  --z-scrim: 48;
  --z-sheet: 50;
  --z-toast: 60;
}