/* ============================================================
   Jojo Donut / Šiškáči — shared tokens + base reset
   Loaded BEFORE page-specific CSS on every page.
   Single source of truth for brand colours, type and resets.
   ============================================================ */
:root {
  /* Neutrals — warm off-white system */
  --bg: #f5f1e8;
  --bg-2: #ebe6da;
  --ink: #1a1410;
  --ink-2: #2e2620;
  --muted: #534a42;
  --line: #e2dccb;

  /* Brand — sky blue. sRGB fallback, then OKLCH (P3-aware) for vivid displays */
  --brand: #4fb3e8;
  --brand-deep: #2e8dc4;
  /* Soft variants derived via color-mix — single source of truth */
  --brand-soft:   color-mix(in oklab, var(--brand) 22%, white);
  --brand-softer: color-mix(in oklab, var(--brand) 10%, white);
  --brand-glow:   color-mix(in oklab, var(--brand) 30%, transparent);

  /* Accent — used sparingly */
  --accent: #eab29a;
  --accent-soft: color-mix(in oklab, var(--accent) 35%, white);

  /* Modern displays: upgrade brand to wider gamut where supported */
  @supports (color: oklch(70% 0.18 230)) {
    --brand: oklch(72% 0.14 230);
    --brand-deep: oklch(58% 0.13 230);
  }

  /* Legacy aliases — keep older markup working without rainbow drift */
  --pink: var(--brand);
  --pink-soft: var(--brand-soft);
  --yellow: var(--ink);
  --yellow-soft: var(--bg-2);
  --sky: var(--brand);
  --sky-soft: var(--brand-soft);
  --mint: var(--brand);
  --mint-soft: var(--brand-softer);
  --purple: var(--brand-deep);
  --purple-soft: var(--brand-soft);
  --orange: var(--accent);

  /* Misc */
  --accent-h: 200;
  --glass-blur: 6px;
  --radius: 24px;

  /* Easing */
  --ease-out:    cubic-bezier(.22, 1,    .36, 1);
  --ease-spring: cubic-bezier(.2,  .9,   .18, 1.12);
  --ease-soft:   cubic-bezier(.33, 1,    .68, 1);

  /* Type */
  --font-display: "Fraunces", "Times New Roman", serif;
  --font-body:    "Nunito", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
body {
  font-family: var(--font-body);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "kern";
}
p {
  text-wrap: pretty;
}
a       { color: inherit; text-decoration: none; }
button  { cursor: pointer; font: inherit; color: inherit; background: none; border: 0; }
img,
svg     { display: block; max-width: 100%; }
ul      { list-style: none; padding: 0; margin: 0; }
p       { margin: 0; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.95;
  color: var(--ink);
  text-wrap: balance;
}

/* ===== Focus ===== */
:focus-visible      { outline: 2.5px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

/* ===== Selection ===== */
::selection { background: var(--brand); color: #fff; }

/* ===== Reduced motion safety net ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== View Transitions (cross-document, modern browsers) ===== */
@view-transition { navigation: auto; }
@supports (view-transition-name: none) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.42s;
    animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  }
  ::view-transition-old(root) {
    animation-name: vt-fade-out;
  }
  ::view-transition-new(root) {
    animation-name: vt-fade-in;
  }
  @keyframes vt-fade-out {
    to { opacity: 0; transform: scale(.985); }
  }
  @keyframes vt-fade-in {
    from { opacity: 0; transform: scale(1.015); }
  }
}