/* ============================================================
   DESIGN TOKENS — LIGHT VARIANT — o-mateuszu (about-system10h)
   Kalibracja 2026 §5b OPCJA C | 2026-05-27
   ------------------------------------------------------------
   TEN SAM język designu co system10h.com (dark design_tokens.css):
   IDENTYCZNE klasy komponentów (.display-h1/.display-h2/.chapter-marker,
   .kinetic, [data-reveal], .bento*, .btn*, micro-motion .arrow, grain,
   prefers-reduced-motion). RÓŻNI SIĘ TYLKO :root — paleta LIGHT
   (cream/terracotta) = oficjalny wariant brandu o-mateuszu.
   Wartości :root pochodzą z kanonicznego inline :root w o-mateuszu/index.html
   (źródło prawdy light-palety) — NIE wymyślone.
   ============================================================ */

:root {
  /* -----------------------------------------
     PALETTE — LIGHT (cream bg, terracotta accent)
     Wartości z inline :root o-mateuszu/index.html
     ----------------------------------------- */
  --color-bg:              #faf8f5;  /* cream paper */
  --color-bg-raised:       #ffffff;  /* surface / elevated cards (o-mateuszu --color-surface) */
  --color-text-primary:    #1a1814;  /* near-black warm */
  --color-text-secondary:  #5a5248;  /* warm stone — metadata, muted */
  --color-text-tertiary:   #6f6760;  /* WCAG AA captions (LP-005) */
  --color-border:          #e5ddd0;  /* warm divider */
  --color-border-subtle:   #c8bfae;  /* hover states (o-mateuszu --color-border-strong) */

  --color-accent:          #c9462c;  /* terracotta — CTA, keywords */
  --color-accent-dim:      #a6371f;  /* terracotta-700 — hover (przyciemniony c9462c) */
  --color-accent-faint:    rgba(201, 70, 44, 0.08); /* terracotta tint bg */

  --color-signal:          #c9462c;  /* terracotta — RARE (light nie ma osobnego signal) */
  --color-success:         #5a7a4e;  /* muted sage przyciemniona pod jasne tło */

  /* -----------------------------------------
     TYPOGRAPHY — Fraunces + Inter + Geist Mono (identyczne jak dark)
     ----------------------------------------- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'Geist Mono', 'SF Mono', 'JetBrains Mono', ui-monospace, Consolas, monospace;

  /* Modular scale — Perfect Fourth (1.333) — identyczna jak dark */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   19px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  42px;
  --text-4xl:  56px;
  --text-5xl:  72px;
  --text-6xl:  96px;
  --text-display: clamp(4rem, 10vw, 9rem);

  /* Line heights */
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight: -0.03em;
  --tracking-snug:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:  0.05em;

  /* -----------------------------------------
     SPACING — 4/8px base scale (identyczna jak dark)
     ----------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-48: 192px;

  /* -----------------------------------------
     RADII — 2 tiers (flat premium) — identyczne jak dark
     ----------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* -----------------------------------------
     SHADOWS — light-tuned (subtelne, NO glow).
     Dark używa rgba(0,0,0,0.4/0.6) na off-black; na cream
     przyciemniamy alpha by uniknąć ciężkich plam.
     ----------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(26, 24, 20, 0.06);
  --shadow-md: 0 4px 16px rgba(26, 24, 20, 0.10);

  /* -----------------------------------------
     MOTION — identyczne curve/duration jak dark (motion = invariant)
     ----------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 180ms;
  --duration-med:  320ms;
  --duration-slow: 520ms;

  /* -----------------------------------------
     LAYOUT — identyczne jak dark
     ----------------------------------------- */
  --container-narrow: 680px;
  --container-med:    960px;
  --container-wide:   1200px;
}

/* ============================================================
   GRAIN OVERLAY — paper-noise texture
   Struktura 1:1 z dark; opacity dostrojona na jasne tło
   (overlay blend na cream → multiply, lekko niżej niż dark 0.04).
   ============================================================ */

.dt-grain::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.03;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

/* ============================================================
   TYPOGRAPHY CLASSES — struktura 1:1 z dark, kolor przez var()
   ============================================================ */

.display-h1 {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 50, 'wght' 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.display-h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 500;
  font-variation-settings: 'opsz' 72, 'SOFT' 30, 'wght' 500;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--color-text-primary);
}

.chapter-marker {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variation-settings: 'opsz' 24, 'SOFT' 0, 'wght' 600;
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ============================================================
   BUTTONS — flat premium, struktura 1:1 z dark
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
  text-decoration: none;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}

.btn-primary:hover {
  background: var(--color-accent-dim);
  border-color: var(--color-accent-dim);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-subtle);
}

.btn-secondary:hover {
  border-color: var(--color-text-secondary);
  background: var(--color-bg-raised);
}

/* ============================================================
   KALIBRACJA 2026 — Editorial Craft 2026
   Klasy ruchu kopiowane 1:1 z dark (motion = invariant niezależny
   od palety). TYLKO kolory poprzez var(). NIE zmieniamy keyframes.
   ============================================================ */

/* ------------------------------------------------------------
   D5 — SCROLL-REVEAL (fade + slide). Zero CLS: animujemy wyłącznie
   opacity + transform. Struktura 1:1 z dark.
   ------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal][data-seq] { transition-delay: calc(var(--seq, 0) * 80ms); }

/* ------------------------------------------------------------
   D2 — KINETIC TYPOGRAPHY (powściągliwy). Nagłówek „dojeżdża"
   po osi variable-font + lekki slide przy wejściu. Zero CLS:
   animujemy font-variation-settings + transform (compositor-safe).
   Struktura/motion 1:1 z dark; warianty zmapowane na nagłówki
   tej strony (.section-title, .hero h1) — TEN SAM efekt.
   ------------------------------------------------------------ */
.kinetic {
  transform: translateY(14px);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out),
              font-variation-settings var(--duration-slow) var(--ease-out);
  will-change: transform, opacity, font-variation-settings;
}
/* warianty dark zachowane (system) */
.kinetic.display-h1 { font-variation-settings: 'opsz' 72, 'SOFT' 50, 'wght' 280; }
.kinetic.display-h2 { font-variation-settings: 'opsz' 48, 'SOFT' 30, 'wght' 340; }
/* warianty zmapowane na realne nagłówki o-mateuszu (ten sam ruch osi opsz/wght) */
.hero h1.kinetic        { font-variation-settings: 'opsz' 72, 'SOFT' 0, 'wght' 340; }
.section-title.kinetic  { font-variation-settings: 'opsz' 48, 'wght' 340; }
.kinetic.is-in { opacity: 1; transform: translateY(0); }
.kinetic.display-h1.is-in { font-variation-settings: 'opsz' 144, 'SOFT' 50, 'wght' 400; }
.kinetic.display-h2.is-in { font-variation-settings: 'opsz' 72, 'SOFT' 30, 'wght' 500; }
.hero h1.kinetic.is-in        { font-variation-settings: 'opsz' 144, 'SOFT' 0, 'wght' 500; }
.section-title.kinetic.is-in  { font-variation-settings: 'opsz' 72, 'wght' 500; }
.kinetic em, .kinetic.is-in em { font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 500; }

/* chapter-marker / section-label: subtelna kreska wyrastająca przy wejściu */
.chapter-marker.kinetic-marker,
.section-label.kinetic-marker { display: inline-flex; align-items: center; gap: var(--space-3); }
.chapter-marker.kinetic-marker::before,
.section-label.kinetic-marker::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transition: width var(--duration-slow) var(--ease-out);
}
.chapter-marker.kinetic-marker.is-in::before,
.section-label.kinetic-marker.is-in::before,
[data-reveal].is-in .chapter-marker.kinetic-marker::before,
[data-reveal].is-in .section-label.kinetic-marker::before { width: 28px; }

/* ------------------------------------------------------------
   D5 — MICRO-MOTION CTA (strzałka „idzie naprzód" na hover).
   Struktura 1:1 z dark. Działa na .btn-primary/.btn-ghost o-mateuszu.
   ------------------------------------------------------------ */
.btn .arrow,
.btn [aria-hidden="true"],
.btn-primary .arrow,
.btn-ghost .arrow { display: inline-block; transition: transform var(--duration-fast) var(--ease-out); }
.btn:hover .arrow,
.btn:hover [aria-hidden="true"],
.btn-primary:hover .arrow,
.btn-ghost:hover .arrow { transform: translateX(3px); }

/* ------------------------------------------------------------
   D1 — BENTO GRID (asymetryczna siatka). Struktura 1:1 z dark;
   radii 8px, border subtle. ZERO glow/pill. Karty na light surface.
   ------------------------------------------------------------ */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-4);
}
.bento-item {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color var(--duration-med) var(--ease-out),
              box-shadow var(--duration-med) var(--ease-out);
}
.bento-item:hover {
  border-color: var(--color-border-subtle);
  box-shadow: var(--shadow-md);
}
.bento-item.bento-lead {
  background: linear-gradient(180deg, var(--color-accent-faint), transparent 60%), var(--color-bg-raised);
}
.bento-span-2 { grid-column: span 2; }
.bento-span-3 { grid-column: span 3; }
.bento-span-4 { grid-column: span 4; }
.bento-span-6 { grid-column: span 6; }

@media (max-width: 860px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-span-2, .bento-span-3, .bento-span-4, .bento-span-6 { grid-column: span 2; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .bento-span-2, .bento-span-3, .bento-span-4, .bento-span-6 { grid-column: span 1; }
}

/* ============================================================
   A11Y — reduced motion (rozszerzone o klasy 2026) — struktura 1:1 z dark
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .kinetic { opacity: 1 !important; transform: none !important; }
  .kinetic.display-h1 { font-variation-settings: 'opsz' 144, 'SOFT' 50, 'wght' 400 !important; }
  .kinetic.display-h2 { font-variation-settings: 'opsz' 72, 'SOFT' 30, 'wght' 500 !important; }
  .hero h1.kinetic { font-variation-settings: 'opsz' 144, 'SOFT' 0, 'wght' 500 !important; }
  .section-title.kinetic { font-variation-settings: 'opsz' 72, 'wght' 500 !important; }
  .kinetic em { font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 500 !important; }
  .chapter-marker.kinetic-marker::before,
  .section-label.kinetic-marker::before { width: 28px !important; }
  .btn:hover .arrow, .btn:hover [aria-hidden="true"],
  .btn-primary:hover .arrow, .btn-ghost:hover .arrow { transform: none !important; }
}