/* ============================================================
   MIRA v2 — design tokens & theming
   One warm-purple world · light/dark · editorial/premium moods
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ---- brand purple ramp (oklch, hue ~295) ---- */
  --p-50:  oklch(0.972 0.014 300);
  --p-100: oklch(0.945 0.030 300);
  --p-200: oklch(0.900 0.055 298);
  --p-300: oklch(0.840 0.085 297);
  --p-400: oklch(0.760 0.120 296);
  --p-500: oklch(0.660 0.150 295);
  --p-600: oklch(0.600 0.158 295);
  --p-700: oklch(0.520 0.150 294);
  --p-800: oklch(0.430 0.120 293);
  --p-900: oklch(0.320 0.080 292);

  /* warm pink companion (orb / glows) */
  --pink-300: oklch(0.840 0.080 350);
  --pink-400: oklch(0.770 0.110 352);

  /* signal colors — share chroma/lightness, vary hue */
  --up:    oklch(0.640 0.120 155);
  --down:  oklch(0.640 0.140 28);
  --warn:  oklch(0.760 0.130 75);

  --accent: var(--p-600);
  --accent-soft: var(--p-100);
  --accent-ink: var(--p-700);

  /* fonts */
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, sans-serif;

  /* radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* density (driven by mood) */
  --space: 1;
  --gap: calc(20px * var(--space));
  --pad: calc(22px * var(--space));
}

/* ===================== LIGHT (default) ===================== */
:root, [data-theme="light"] {
  --bg:        oklch(0.975 0.010 320);
  --bg-2:      oklch(0.962 0.014 320);
  --surface:   oklch(0.995 0.004 320);
  --surface-2: oklch(0.978 0.010 320);
  --surface-3: oklch(0.955 0.016 318);
  --hover:     oklch(0.945 0.022 312);
  --line:      oklch(0.905 0.020 315);
  --line-soft: oklch(0.935 0.014 315);

  --ink:    oklch(0.255 0.035 300);
  --ink-2:  oklch(0.430 0.040 300);
  --ink-3:  oklch(0.580 0.035 300);
  --ink-4:  oklch(0.700 0.028 300);

  --shadow-sm: 0 1px 2px oklch(0.40 0.08 300 / 0.06), 0 2px 8px oklch(0.40 0.08 300 / 0.05);
  --shadow-md: 0 4px 14px oklch(0.40 0.10 300 / 0.10), 0 1px 4px oklch(0.40 0.08 300 / 0.06);
  --shadow-lg: 0 18px 50px oklch(0.35 0.12 300 / 0.16), 0 6px 18px oklch(0.35 0.10 300 / 0.10);
  --shadow-orb: 0 30px 80px oklch(0.55 0.16 300 / 0.40);

  /* Poświata w rogach bierze kolor MARKI klienta (--accent), nie różu na sztywno.
     Dzięki temu zielony klient dostaje subtelną zieleń, różowy róż itd. (fix 2026-07-09,
     feedback Andrzeja: róż nie pasuje do klienta-mężczyzny). Subtelnie, żeby było neutralne. */
  --app-grad: radial-gradient(120% 90% at 12% 0%, color-mix(in oklch, var(--accent) 12%, transparent), transparent 55%),
              radial-gradient(120% 100% at 100% 8%, color-mix(in oklch, var(--accent) 8%, transparent), transparent 50%);
}

/* ===================== DARK ===================== */
[data-theme="dark"] {
  --bg:        oklch(0.165 0.028 295);
  --bg-2:      oklch(0.195 0.030 295);
  --surface:   oklch(0.225 0.032 296);
  --surface-2: oklch(0.255 0.034 296);
  --surface-3: oklch(0.290 0.036 296);
  --hover:     oklch(0.310 0.040 296);
  --line:      oklch(0.330 0.035 296);
  --line-soft: oklch(0.285 0.030 296);

  --ink:    oklch(0.965 0.012 320);
  --ink-2:  oklch(0.820 0.022 318);
  --ink-3:  oklch(0.680 0.028 312);
  --ink-4:  oklch(0.560 0.030 305);

  --accent: var(--p-400);
  --accent-soft: oklch(0.330 0.060 296);
  --accent-ink: var(--p-300);

  --up:   oklch(0.760 0.130 155);
  --down: oklch(0.730 0.150 28);
  --warn: oklch(0.820 0.130 80);

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.30), 0 2px 8px oklch(0 0 0 / 0.30);
  --shadow-md: 0 6px 18px oklch(0 0 0 / 0.40), 0 1px 4px oklch(0 0 0 / 0.30);
  --shadow-lg: 0 24px 60px oklch(0 0 0 / 0.55), 0 8px 20px oklch(0 0 0 / 0.40);
  --shadow-orb: 0 30px 90px oklch(0.55 0.18 300 / 0.55);

  /* Tryb ciemny: ta sama zasada — poświata z koloru marki klienta (--accent), nie różu. */
  --app-grad: radial-gradient(120% 90% at 12% 0%, color-mix(in oklch, var(--accent) 22%, transparent), transparent 55%),
              radial-gradient(120% 100% at 100% 8%, color-mix(in oklch, var(--accent) 15%, transparent), transparent 50%);
}

/* ===================== MOODS ===================== */
/* editorial = airy, big serif (default via --space)            */
[data-mood="editorial"] { --space: 1.12; }
/* premium = denser, crisper, faster                            */
[data-mood="premium"]   { --space: 0.82; }

/* ===================== base ===================== */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent); color: white; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font-family: inherit; }

/* utility */
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: 0; }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Transform-only entrances: content stays visible if the animation is paused
   (backgrounded tab, print/PDF, reduced-motion) — never blank. */
@keyframes riseIn { from { transform: translateY(12px); } to { transform: none; } }
@keyframes popIn  { from { transform: scale(0.97); } to { transform: none; } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }