/* ============================================================
   petsitter.yauhen — design tokens
   System: Premium Suprematism. Malevich primitives × Chagall blue.
   ============================================================ */

:root {
  /* ── Surfaces ────────────────────────────────────────────
     Warm cream paper + true ink. Two surfaces, max contrast. */
  --paper:        #EEEAE0;   /* page — warm cream */
  --paper-warm:   #E6E0D3;   /* tinted alt surface */
  --paper-deep:   #DBD4C2;   /* card / quote */
  --paper-bright: #F5F1E6;   /* "white" on dark sections — warmer than #FFF, brighter than paper */
  --ink:          #1F1D18;   /* primary text, headings — deep neutral dark (not black, slight warmth) */
  --ink-deep:     #181614;   /* dark section fills — dark with whisper of warmth (gold pulled back), holds Hasselblad film grain */
  --ink-2:        #1A1A18;
  --ink-soft:     #4A4A46;
  --ink-mute:     #8A8780;
  /* All hairlines/dividers on the site share the same soft tone — the
     "Dziennik praktyki" ledger separator. Hand-mixed from ink at ~14%
     so the line is present but never harsh against cream paper. */
  --line:         color-mix(in oklab, var(--ink) 14%, transparent);
  --line-soft:    color-mix(in oklab, var(--ink) 10%, transparent);
  --line-strong:  color-mix(in oklab, var(--ink) 24%, transparent);

  /* ── Suprematist primaries · Chagall-warmed ─────────────
     Cobalt anchor + warmed reds (terracotta, wine) + honey gold.
     The reds shift slightly toward Chagall's interior-glow palette
     — less tomato, more brick/crimson — without losing the
     "Malevich red square" brand reading. */
  --red:          #C8362A;   /* terracotta-leaning crimson */
  --red-deep:     #9C2A20;   /* deeper wine-rust */
  --ochre:        #D4A040;   /* honey gold (deeper than the prior sun-yellow) */
  --gold-soft:    #E8C480;   /* warmer interior glow (Chagall yellow-cream) */
  --wine:         #8C3050;   /* magenta-wine accent (the flying figure) */
  --coral:        #C46B3B;   /* warm rust orange (Promenade flowers, angel wings) */
  --chagall:      #1E4F9C;   /* Chagall's "Blue House" cobalt */
  --chagall-deep: #163C7A;
  --chagall-soft: #4A78BD;
  --chagall-night: #0D1A40;  /* midnight blue (Solitude sky) */
  --azure:        #1E4F9C;   /* alias for backwards-compat */
  --moss:         #3F6B4D;   /* brand link, kept for continuity */
  --moss-deep:    #2D5239;

  /* Status */
  --ok:           #3F6B4D;
  --danger:       #B0271D;

  /* ── Type ───────────────────────────────────────────────
     One editorial serif, one geometric sans, one mono for labels. */
  --font-display: 'Fraunces', 'Lora', Georgia, 'Times New Roman', serif;
  /* Body — Figtree. Modern neutral grotesk (2022) designed for UI and
     long-form reading: low contrast, generous x-height, optimized for
     screen rendering. Replaces Inter; keeps the four-font family rule. */
  --font-body:    'Figtree', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Modern grotesk used for clean UI digits — calendar days, prices, badges. */
  --font-label:   'Space Grotesk', 'Figtree', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Fluid scale */
  --t-micro:      0.68rem;
  --t-eyebrow:    0.74rem;
  --t-caption:    0.85rem;
  --t-body:       1.05rem;
  --t-lead:       clamp(1.125rem, 0.95rem + 0.7vw, 1.4rem);
  --t-h3:         clamp(1.35rem, 1.05rem + 1.1vw, 1.8rem);
  --t-h2:         clamp(2.1rem, 1.3rem + 3.2vw, 4rem);
  --t-h1:         clamp(2.8rem, 1.6rem + 6vw, 7rem);
  --t-display:    clamp(3.5rem, 2rem + 8vw, 10rem);
  --t-mega:       clamp(5rem, 2rem + 14vw, 18rem);

  /* Space — compact rhythm. Editorial print density, not airy SaaS. */
  --s-1: 0.4rem;
  --s-2: 0.85rem;
  --s-3: 1.3rem;
  --s-4: 1.9rem;
  --s-5: 2.8rem;
  --s-6: clamp(2.8rem, 2rem + 3vw, 4.5rem);

  /* Layout */
  --measure: 60ch;
  --gutter:  clamp(1.5rem, 2.4vw + 0.5rem, 3rem);
  --grid-max: 1180px;
  --header-h: 88px;

  /* Geometry */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 6px;
  --r-pill: 999px;

  /* Motion */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 180ms;
  --dur-2: 420ms;
  --dur-3: 820ms;
  --dur-4: 1400ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}