:root {
  color-scheme: dark;

  --bg-color: #000000;
  --text-color: #f5f5f7;
  --muted-color: #86868b;
  --accent: #2997ff;

  --sheen-hi: rgba(255, 255, 255, 0.16);
  --sheen-mid: rgba(255, 255, 255, 0.05);
  --sheen-rim: rgba(255, 255, 255, 0.28);
  --pill-bg: rgba(255, 255, 255, 0.08);
  --glass-ring: rgba(255, 255, 255, 0.14);
  --glass-depth: rgba(0, 0, 0, 0.35);
  --glass-shadow: rgba(0, 0, 0, 0.35);
  --glow: 0.55;

  --glass-filter: blur(18px) saturate(180%);
  --glass-elevation:
    0 12px 32px var(--glass-shadow),
    0 0 0 0.5px var(--glass-ring),
    inset 0 -1px 1px var(--glass-depth);

  --pad: clamp(56px, 10vw, 140px);
  --radius: clamp(16px, 2vw, 28px);
  --pane-h: calc(100vh - 2 * var(--pad));
  --pane-w: calc(100vw - 2 * var(--pad) - env(safe-area-inset-left) - env(safe-area-inset-right));
  --pane-left: calc(var(--pad) + env(safe-area-inset-left));

  --font-display:
    "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui,
    Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text:
    "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto,
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-rotate: cubic-bezier(0.4, 0, 0.2, 1);

  --z-cover: 5;
  --z-mask: 9990;
  --z-pane: 9999;
  --z-ui: 10000;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg-color: #f5f5f7;
  --text-color: #1d1d1f;
  --muted-color: #6e6e73;
  --accent: #0071e3;

  --sheen-hi: rgba(255, 255, 255, 0.42);
  --sheen-mid: rgba(255, 255, 255, 0.12);
  --sheen-rim: rgba(255, 255, 255, 0.75);
  --pill-bg: rgba(255, 255, 255, 0.55);
  --glass-ring: rgba(0, 0, 0, 0.06);
  --glass-depth: rgba(0, 0, 0, 0.06);
  --glass-shadow: rgba(0, 0, 0, 0.12);
  --glow: 0.32;
}

@media (max-width: 768px) and (orientation: portrait) {
  :root {
    --pane-h: 54vh;
    --pane-w: calc(90vw - env(safe-area-inset-left) - env(safe-area-inset-right));
    --radius: 5vw;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  :root {
    --pad: 8vh;
    --radius: 4vh;
    --pane-w: calc(72vw - env(safe-area-inset-left) - env(safe-area-inset-right));
    --pane-left: calc(14vw + env(safe-area-inset-left));
  }
}