:root {
  /* === BRAND CORE (unchanged across themes) === */
  --brand-orange: oklch(0.74 0.18 45);
  --brand-pink:   oklch(0.66 0.24 5);
  --brand-violet: oklch(0.58 0.22 305);
  --brand-gradient:      linear-gradient(90deg, var(--brand-orange), var(--brand-pink), var(--brand-violet));
  --brand-gradient-vert: linear-gradient(180deg, var(--brand-orange), var(--brand-pink), var(--brand-violet));
  --brand-gradient-diag: linear-gradient(135deg, var(--brand-orange), var(--brand-pink), var(--brand-violet));
  --brand-mesh: radial-gradient(at 15% 15%, color-mix(in oklch, var(--brand-orange) 18%, transparent), transparent 50%),
                radial-gradient(at 55% 55%, color-mix(in oklch, var(--brand-pink) 18%, transparent), transparent 50%),
                radial-gradient(at 85% 85%, color-mix(in oklch, var(--brand-violet) 18%, transparent), transparent 50%);

  /* === LIGHT THEME (default, z brand booka V2.3 Light Expansion) === */
  --bg:          oklch(0.98 0.012 80);
  --surface:     oklch(0.96 0.014 75);
  --surface-2:   oklch(0.93 0.018 75);
  --surface-3:   oklch(0.90 0.020 75);
  --rule:        oklch(0.88 0.02 75);
  --rule-2:      oklch(0.82 0.022 75);
  --text:        oklch(0.18 0.025 280);
  --text-2:      oklch(0.40 0.025 280);
  --text-muted:  oklch(0.55 0.022 280);

  /* Aliases for backwards compatibility */
  --bg-elev-1: var(--surface);
  --bg-elev-2: var(--surface-2);
  --border: var(--rule);
  --border-strong: var(--rule-2);
  --text-soft: var(--text-2);
  --muted: var(--text-muted);
  --muted-soft: var(--rule-2);

  /* === TYPOGRAPHY === */
  --font-display: "Syne", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* === RADII === */
  --r-xs:  6px;
  --r-sm:  8px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  18px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* === SPACING === */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* === SHADOWS (light theme – soft, not glows) === */
  --shadow-sm:      0 1px 2px rgba(0,0,0,0.04);
  --shadow-card:    0 2px 8px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-glow:    0 0 0 1px var(--brand-pink), 0 4px 12px oklch(0.66 0.24 5 / 0.15);
  --shadow-cta:     0 6px 20px oklch(0.66 0.24 5 / 0.25);
  --shadow-premium: 0 24px 60px rgba(0,0,0,0.10), 0 8px 24px rgba(0,0,0,0.06);

  /* === MOTION === */
  --ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:   cubic-bezier(0.19, 1, 0.22, 1);
  --ease-emil:       cubic-bezier(0.23, 1, 0.32, 1);
  --t-instant:    80ms;
  --t-fast:       180ms;
  --t-base:       280ms;
  --t-slow:       480ms;
  --t-deliberate: 700ms;

  /* === LAYOUT === */
  --sidebar-w:   240px;
  --tabbar-h:    72px;
  --nav-h:       64px;

  /* Z-index */
  --z-nav: 100;
  --z-modal: 500;
  --z-toast: 900;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-feature-settings: "ss01", "cv01";
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
::selection { background: color-mix(in oklch, var(--brand-pink) 25%, transparent); color: var(--text); }

/* === Typography utility === */
.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }
.font-mono    { font-family: var(--font-mono); }
.gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.muted { color: var(--text-muted); }

/* App eyebrow (Mono, pink, uppercase) – characteristic brand book element */
.app-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brand-pink);
  font-weight: 500;
  margin-bottom: var(--space-2);
}

/* App headlines */
.app-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 var(--space-2);
}
.app-sub {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 var(--space-6);
  max-width: 56ch;
}

/* Dash title (smaller, used for sub-headings) */
.dash-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}
.dash-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 var(--space-4);
}