:root {
  /* ── Background ── */
  --bg-primary: #0D0D14;
  --bg-secondary: #13131F;
  --bg-card: #1C1C2E;
  --bg-input: #1C1C2E;

  /* ── Brand Colors ── */
  --iris: #7C4DFF;
  --iris-light: #9B6FFF;
  --blush: #FF4D8D;
  --mint: #00E5CC;
  --amber: #FF8C42;
  --crimson: #FF4D4D;

  /* ── Text Colors ── */
  --text-primary: #F2F2F7;
  --text-secondary: #9999B3;
  --text-disabled: #404058;
  --text-dim: rgba(255,255,255,0.3);

  /* ── Borders & Dividers ── */
  --divider: rgba(255,255,255,0.06);
  --border-subtle: rgba(255,255,255,0.08);
  --border-card: rgba(124,77,255,0.2);

  /* ── Gradients ── */
  --grad-iris: linear-gradient(135deg, #7C4DFF, #FF4D8D);
  --grad-night: linear-gradient(180deg, #0D0D14, #1A0A2E);
  --grad-glow: radial-gradient(circle, rgba(124,77,255,0.15), transparent 70%);
  --grad-pro: linear-gradient(135deg, #00E5CC, #7C4DFF);
  --grad-card-overlay: linear-gradient(to top, rgba(13,13,20,0.95) 0%, rgba(13,13,20,0.6) 40%, transparent 100%);

  /* ── Glass ── */
  --glass-bg: rgba(28,28,46,0.85);
  --glass-blur: blur(24px);
  --glass-border: 1px solid rgba(255,255,255,0.08);

  /* ── Shadows ── */
  --shadow-s: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-m: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-glow: 0 4px 20px rgba(124,77,255,0.4);
  --shadow-pink: 0 4px 16px rgba(255,77,141,0.35);

  /* ── Spacing ── */
  --sp-xs: 4px;
  --sp-s: 8px;
  --sp-m: 12px;
  --sp-l: 16px;
  --sp-xl: 24px;
  --sp-2xl: 32px;
  --sp-3xl: 48px;

  /* ── Radii ── */
  --r-xs: 4px;
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-3xl: 28px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* ── Sizing ── */
  /* WKWebView with contentInsetAdjustmentBehavior=.never often reports env(safe-area-inset-*) as 0.
     iOS shell sets --sc-safe-* on documentElement; env() remains fallback for browser/PWA. */
  --sc-safe-top: env(safe-area-inset-top, 0px);
  --sc-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sc-safe-left: env(safe-area-inset-left, 0px);
  --sc-safe-right: env(safe-area-inset-right, 0px);
  /* Border-box height of .tab-bar (row + home indicator). Used for page padding-bottom. */
  --tab-height: calc(52px + var(--sc-safe-bottom));
  --nav-height: 52px;
  --btn-height-l: 56px;
  --btn-height-m: 50px;
  --btn-height-s: 36px;
  --avatar-xs: 24px;
  --avatar-s: 32px;
  --avatar-m: 56px;
  --avatar-l: 60px;
  --avatar-xl: 100px;

  /* ── Animation ── */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.2s;
  --dur-normal: 0.35s;
  --dur-slow: 0.45s;

  /* ── Mood Aura ── */
  --mood-glow: rgba(124,77,255,0.0);
}

/* iPad / Stage Manager / wide WKWebView: full-width shell (see index.html sc-wide pre-CSS hook). */
@media (min-width: 600px) {
  :root {
    --frame-max-w: 100%;
  }
}
html.sc-wide {
  --frame-max-w: 100%;
}
html.is-ipad {
  --frame-max-w: 100%;
}