/* ==========================================================================
   Potęga Prasy Design System — tokens (ported verbatim from design-system/)
   --------------------------------------------------------------------------
   Source of truth for the hand-built PHP templates. The same values are
   mirrored into theme.json so the Gutenberg editor offers the brand palette,
   type and spacing. Fonts are loaded separately (assets/fonts/fonts.css);
   the Google Fonts @import and the Baloo 2 display fallback were removed —
   we self-host a Polish-fixed Fredoka instead.
   ========================================================================== */

:root {
  /* ---- Sea Blue (primary) ---------------------------------------------- */
  --pp-blue-50:  #e6f5fc;
  --pp-blue-100: #c4e8f8;
  --pp-blue-200: #8fd4f1;
  --pp-blue-300: #4cbde8;
  --pp-blue-400: #1aa6de;
  --pp-blue-500: #0090d0;   /* BRAND — exact logo blue */
  --pp-blue-600: #0078b2;
  --pp-blue-700: #005f8d;
  --pp-blue-800: #0a4d6f;
  --pp-blue-900: #0d3f5a;

  /* ---- Sun Orange (secondary / accent) --------------------------------- */
  --pp-orange-50:  #fef2e2;
  --pp-orange-100: #fcdfb8;
  --pp-orange-200: #f9c57e;
  --pp-orange-300: #f6ac45;
  --pp-orange-400: #f39c28;
  --pp-orange-500: #f09020;   /* BRAND — exact "Rewalacje" orange */
  --pp-orange-600: #d9760f;
  --pp-orange-700: #b35c0c;
  --pp-orange-800: #8d4912;
  --pp-orange-900: #743d13;

  /* ---- Ink & warm neutrals (paper / sand) ------------------------------ */
  --pp-ink:      #202020;   /* logo black */
  --pp-white:    #ffffff;
  --pp-sand-50:  #faf8f4;   /* page paper */
  --pp-sand-100: #f3efe8;
  --pp-sand-200: #e6e0d6;
  --pp-sand-300: #d2cabd;
  --pp-sand-400: #ada596;
  --pp-sand-500: #7f786c;
  --pp-sand-600: #5b554c;
  --pp-sand-700: #3d3933;
  --pp-sand-800: #2a2723;
  --pp-sand-900: #1c1a17;

  /* ---- Semantic signal colors ------------------------------------------ */
  --pp-onair:        #e23b2e;   /* RewalStacja "ON AIR" / breaking / error    */
  --pp-onair-bg:     #fce3e0;
  --pp-onair-border: #f0a59d;
  --pp-live:         #1a9d57;   /* live dot / success accent                  */
  --pp-live-ink:     #0e7a40;   /* live text on light (AA contrast)           */
  --pp-live-bg:      #d3efe0;
  --pp-live-border:  #82cfa4;
  --pp-warn:         #c98a00;   /* caution (darkened for text contrast)       */
  --pp-warn-ink:     #9a6a00;
  --pp-warn-bg:      #fbecc4;
  --pp-warn-border:  #e8c668;

  /* ---- Semantic aliases — reach for these in product UI ---------------- */
  --brand:            var(--pp-blue-500);
  --brand-strong:     var(--pp-blue-600);
  --brand-ink:        var(--pp-blue-800);
  --brand-soft:       var(--pp-blue-50);
  --accent:           var(--pp-orange-500);
  --accent-strong:    var(--pp-orange-600);
  --accent-soft:      var(--pp-orange-50);

  --surface-page:     var(--pp-sand-50);
  --surface-card:     var(--pp-white);
  --surface-sunk:     var(--pp-sand-100);
  --surface-ink:      var(--pp-ink);       /* dark sections (radio/TV)       */
  --surface-brand:    var(--pp-blue-500);

  --text-strong:      var(--pp-ink);
  --text-body:        var(--pp-sand-800);
  --text-muted:       var(--pp-sand-500);
  --text-faint:       var(--pp-sand-400);
  --text-on-brand:    var(--pp-white);
  --text-on-dark:     var(--pp-sand-100);
  --text-link:        var(--pp-blue-600);

  --border-hair:      var(--pp-sand-200);
  --border-soft:      var(--pp-sand-300);
  --border-strong:    var(--pp-ink);
  --rule-news:        var(--pp-ink);       /* heavy editorial rule           */

  --focus-ring:       var(--pp-blue-400);

  /* ---- Type: families -------------------------------------------------- */
  /* Baloo 2 fallback dropped — we self-host a Polish-fixed Fredoka.        */
  --font-display: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  --font-sans:    'Libre Franklin', system-ui, -apple-system, sans-serif;
  --font-serif:   'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:    'IBM Plex Mono', 'SFMono-Regular', ui-monospace, monospace;

  /* ---- Type: weights --------------------------------------------------- */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-black:     800;

  /* ---- Type scale (1.250 major-third, 16px base) ----------------------- */
  --text-2xs:  0.694rem;
  --text-xs:   0.8rem;
  --text-sm:   0.9rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.563rem;
  --text-2xl:  1.953rem;
  --text-3xl:  2.441rem;
  --text-4xl:  3.052rem;
  --text-5xl:  3.815rem;
  --text-6xl:  4.768rem;

  /* ---- Line heights ---------------------------------------------------- */
  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.45;
  --leading-relaxed: 1.65;

  /* ---- Tracking -------------------------------------------------------- */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* ---- Semantic type roles --------------------------------------------- */
  --role-poster:   var(--fw-bold) var(--text-6xl)/var(--leading-tight) var(--font-display);
  --role-hero:     var(--fw-semibold) var(--text-5xl)/var(--leading-tight) var(--font-display);
  --role-h1:       var(--fw-semibold) var(--text-4xl)/var(--leading-tight) var(--font-display);
  --role-h2:       var(--fw-semibold) var(--text-3xl)/var(--leading-snug) var(--font-display);
  --role-h3:       var(--fw-bold) var(--text-xl)/var(--leading-snug) var(--font-sans);
  --role-headline: var(--fw-black) var(--text-2xl)/var(--leading-snug) var(--font-sans);
  --role-body:     var(--fw-regular) var(--text-md)/var(--leading-relaxed) var(--font-serif);
  --role-ui:       var(--fw-regular) var(--text-base)/var(--leading-normal) var(--font-sans);
  --role-label:    var(--fw-semibold) var(--text-sm)/var(--leading-normal) var(--font-sans);
  --role-caption:  var(--fw-regular) var(--text-xs)/var(--leading-normal) var(--font-sans);
  --role-eyebrow:  var(--fw-bold) var(--text-2xs)/1 var(--font-mono);

  /* ---- Spacing (4px base grid) ----------------------------------------- */
  --space-0:   0;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.5rem;
  --space-6:   2rem;
  --space-7:   3rem;
  --space-8:   4rem;
  --space-9:   6rem;
  --space-10:  8rem;

  /* ---- Radii ----------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   28px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  /* ---- Border widths --------------------------------------------------- */
  --border-1: 1px;
  --border-2: 2px;
  --border-3: 3px;

  /* ---- Shadows --------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(32, 32, 32, 0.06);
  --shadow-sm: 0 2px 6px rgba(32, 32, 32, 0.08);
  --shadow-md: 0 6px 18px rgba(13, 63, 90, 0.10);
  --shadow-lg: 0 16px 40px rgba(13, 63, 90, 0.14);
  --shadow-sticker: 4px 4px 0 var(--pp-ink);
  --shadow-sticker-blue: 4px 4px 0 var(--pp-blue-500);

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;

  /* ---- Layout ---------------------------------------------------------- */
  --container:      1200px;
  --container-text: 680px;
  --gutter:         var(--space-5);

  /* ---- Z-index --------------------------------------------------------- */
  --z-base:    0;
  --z-sticky:  100;
  --z-nav:     200;
  --z-overlay: 800;
  --z-modal:   900;
  --z-toast:   1000;
}

/* ==========================================================================
   Base element defaults (from design-system/tokens/base.css)
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font: var(--role-ui);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--space-4);
  color: var(--text-strong);
  text-wrap: balance;
}
h1 { font: var(--role-h1); }
h2 { font: var(--role-h2); }
h3 { font: var(--role-h3); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

::selection { background: var(--pp-blue-200); color: var(--pp-ink); }

:focus-visible {
  outline: var(--border-3) solid var(--focus-ring);
  outline-offset: 2px;
}

hr {
  border: 0;
  border-top: var(--border-2) solid var(--rule-news);
  margin: var(--space-5) 0;
}