/* =========================================================
   Wyszyński Design System - Core tokens
   Colors · Type · Spacing · Radii · Shadows · Motion
   ========================================================= */

/* Fonts are loaded via <link rel="stylesheet"> in each page's <head>
   (with preconnect) to avoid the render-blocking @import request chain. */

:root {
  /* ---------- COLOR ---------- */
  /* Whites & paper */
  --biel: #FFFFFF;
  --biel-mgla: #F5F4F1;
  --biel-szron: #EDECE7;

  /* Blacks & text */
  --czern: #0B0B0E;
  --atrament: #3A4560;
  --mgla: #8A92A5;

  /* Navy family */
  --granat: #13213F;
  --granat-noc: #1C2D52;
  --granat-gleboki: #0A1428;

  /* Structural */
  --linia: #E4E2DD;
  --linia-ciemna: rgba(255,255,255,0.14);

  /* Accent - use sparingly */
  --akcent-miedz: #E8672C;

  /* Semantic signals */
  --sygnal-dobrze: #2F6B3E;
  --sygnal-uwaga: #8A5A13;
  --sygnal-blad:  #8E2B2B;

  /* Semantic aliases */
  --fg1: var(--czern);
  --fg2: var(--atrament);
  --fg3: var(--mgla);
  --fg-on-dark: var(--biel);
  --fg-on-dark-muted: rgba(255,255,255,0.72);
  --border-on-dark: rgba(255,255,255,0.4);
  --fill-on-dark-hover: rgba(255,255,255,0.08);
  --bg: var(--biel);
  --bg-alt: var(--biel-mgla);
  --bg-dark: var(--granat);
  --bg-deepest: var(--granat-gleboki);
  --border: var(--linia);
  --brand: var(--granat);
  --brand-hover: var(--granat-noc);
  --brand-press: var(--granat-gleboki);

  /* ---------- TYPE ---------- */
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-display: 600 64px/1.04 var(--font-sans);
  --t-h1:      600 44px/1.1  var(--font-sans);
  --t-h2:      600 30px/1.2  var(--font-sans);
  --t-h3:      600 22px/1.36 var(--font-sans);
  --t-body-lg: 400 20px/1.6  var(--font-sans);
  --t-body:    400 16px/1.6  var(--font-sans);
  --t-label:   500 14px/1.4  var(--font-sans);
  --t-caption: 400 13px/1.4  var(--font-sans);
  --t-eyebrow: 600 11px/1.3  var(--font-sans);
  --t-mono:    500 13px/1.5  var(--font-mono);

  --tracking-eyebrow: 0.14em;
  --tracking-tight:   -0.01em;

  /* ---------- SPACING (8px grid) ---------- */
  --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;
  --space-10: 128px;

  /* ---------- RADII ---------- */
  --r-0: 0; /* @kind radius */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ---------- SHADOWS (restrained) ---------- */
  --shadow-card: 0 1px 2px rgba(11,11,14,0.04), 0 8px 24px rgba(11,11,14,0.06);
  --shadow-modal: 0 8px 32px rgba(11,11,14,0.16), 0 24px 64px rgba(11,11,14,0.18);

  /* ---------- MOTION ---------- */
  --ease-editorial: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --dur-micro: 120ms; /* @kind other */
  --dur-standard: 200ms; /* @kind other */
  --dur-medium: 400ms; /* @kind other */
  --dur-scene: 800ms; /* @kind other */

  /* ---------- LAYOUT ---------- */
  --container-max: 1200px;
  --reading-measure: 680px;
  --header-h: 72px;
  --header-h-compact: 56px;
}

/* =========================================================
   SEMANTIC ELEMENT DEFAULTS
   ========================================================= */
html { background: var(--bg); color: var(--fg1); }
body {
  margin: 0;
  font: var(--t-body);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font: var(--t-h1); letter-spacing: -0.022em; margin: 0 0 var(--space-5); color: var(--fg1); }
h2 { font: var(--t-h2); letter-spacing: -0.018em; margin: 0 0 var(--space-4); color: var(--fg1); }
h3 { font: var(--t-h3); margin: 0 0 var(--space-3); color: var(--fg1); }
p  { margin: 0 0 var(--space-4); color: var(--fg1); }

a  {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--dur-standard) var(--ease-editorial);
}
a:hover { text-decoration-color: var(--akcent-miedz); }

small, .caption { font: var(--t-caption); color: var(--fg2); }

.eyebrow {
  font: var(--t-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg2);
}

.display { font: var(--t-display); letter-spacing: var(--tracking-tight); }

/* Reading-measure article body */
.prose {
  max-width: var(--reading-measure);
  font: var(--t-body-lg);
  color: var(--fg1);
}
.prose p { text-wrap: pretty; }

/* Pull-quote */
.pull-quote {
  font: 450 28px/1.4 var(--font-serif);
  color: var(--fg1);
  border-left: 2px solid var(--akcent-miedz);
  padding-left: var(--space-5);
  margin: var(--space-7) 0;
}