: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);

  /* Semantic – status "kompletny" */
  --ok-green:      oklch(0.65 0.18 145);
  --ok-green-text: oklch(0.45 0.18 145);

  /* Semantic – błąd / ostrzeżenie */
  --danger:        oklch(0.63 0.23 25);
  --danger-text:   oklch(0.50 0.20 25);
  --warn-text:     oklch(0.58 0.14 65);

  /* 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;
}

/* === DARK THEME === */
/* Nadpisuje tylko tokeny motywu – brand-kolory, typografia, spacing zostają.
   Aliasy (--border, --bg-elev-* itd.) idą przez var(), więc dziedziczą automatycznie. */
:root[data-theme="dark"] {
  --bg:          oklch(0.165 0.012 285);
  --surface:     oklch(0.205 0.014 285);
  --surface-2:   oklch(0.245 0.016 285);
  --surface-3:   oklch(0.290 0.018 285);
  --rule:        oklch(0.330 0.020 285);
  --rule-2:      oklch(0.440 0.022 285);
  --text:        oklch(0.955 0.010 80);
  --text-2:      oklch(0.760 0.014 80);
  --text-muted:  oklch(0.605 0.016 80);

  /* Semantic – jaśniejszy zielony, czytelny na ciemnym tle */
  --ok-green:      oklch(0.72 0.16 150);
  --ok-green-text: oklch(0.82 0.15 150);

  /* Semantic – błąd / ostrzeżenie, jaśniejsze warianty pod ciemne tło */
  --danger:        oklch(0.67 0.20 25);
  --danger-text:   oklch(0.74 0.17 25);
  --warn-text:     oklch(0.80 0.13 70);

  /* Cienie – w dark muszą być głębsze, inaczej znikają */
  --shadow-sm:         0 1px 2px rgba(0,0,0,0.50);
  --shadow-card:       0 2px 8px rgba(0,0,0,0.40), 0 1px 3px rgba(0,0,0,0.50);
  --shadow-card-hover: 0 10px 28px rgba(0,0,0,0.55), 0 3px 8px rgba(0,0,0,0.45);
  --shadow-premium:    0 24px 60px rgba(0,0,0,0.65), 0 8px 24px rgba(0,0,0,0.50);
}

/* Płynne przejście tylko w momencie przełączania motywu (klasa zdejmowana po ~320ms) */
:root.theme-anim, :root.theme-anim * {
  transition: background-color var(--t-base) var(--ease-out-quart),
              border-color var(--t-base) var(--ease-out-quart),
              color var(--t-base) var(--ease-out-quart) !important;
}

* { 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);
}