/* =====================================================================
   Framewright — tokeny
   Paleta i typografia zgodne z systemem designu. Nowych barw nie ma,
   odcienie powstają z przezroczystości i mieszania z off-white.
   ===================================================================== */

:root {
  /* Paleta bazowa */
  --navy: #102a45;
  --brass: #b8873a;
  --cyan: #6fa9cc;
  --off-white: #f5f6f7;

  /* Warstwy jasne */
  --surface: var(--off-white);
  --surface-raised: #ffffff;
  --surface-sunken: color-mix(in srgb, var(--navy) 4%, var(--off-white));

  /* Warstwy ciemne */
  --surface-dark: var(--navy);
  --surface-dark-raised: color-mix(in srgb, var(--off-white) 7%, var(--navy));
  --surface-dark-deep: color-mix(in srgb, #000000 22%, var(--navy));

  /* Tekst */
  --ink: var(--navy);
  --ink-muted: color-mix(in srgb, var(--navy) 68%, var(--off-white));
  --ink-faint: color-mix(in srgb, var(--navy) 45%, var(--off-white));
  --ink-inverse: var(--off-white);
  --ink-inverse-muted: color-mix(in srgb, var(--off-white) 72%, var(--navy));

  /* Linie */
  --line: color-mix(in srgb, var(--navy) 12%, transparent);
  --line-strong: color-mix(in srgb, var(--navy) 22%, transparent);
  --line-inverse: color-mix(in srgb, var(--off-white) 16%, transparent);

  /* Akcenty */
  --accent: var(--brass);
  --accent-soft: color-mix(in srgb, var(--brass) 14%, transparent);
  --accent-2: var(--cyan);
  --accent-2-soft: color-mix(in srgb, var(--cyan) 16%, transparent);

  /* Brass na navy bywa na granicy kontrastu, na ciemnym tle rozjaśniamy */
  --accent-on-dark: color-mix(in srgb, var(--brass) 78%, var(--off-white));

  /* Typografia */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* Skala typograficzna. Tracking zależny od stopnia pisma:
     duże napisy ciaśniej, małe luźniej. */
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.19rem, 1.12rem + 0.35vw, 1.4rem);
  --step-2: clamp(1.42rem, 1.3rem + 0.6vw, 1.8rem);
  --step-3: clamp(1.69rem, 1.48rem + 1.05vw, 2.44rem);
  --step-4: clamp(1.95rem, 1.66rem + 1.45vw, 2.95rem);
  --step-5: clamp(2.3rem, 1.92rem + 1.9vw, 3.6rem);

  --tracking-display: -0.028em;
  --tracking-heading: -0.018em;
  --tracking-body: 0em;
  --tracking-label: 0.16em;

  --leading-display: 1.04;
  --leading-heading: 1.14;
  --leading-body: 1.65;

  /* Rytm pionowy i poziomy */
  --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;

  --shell: 1200px;
  --shell-narrow: 780px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Cienie: nad gęstą treścią cięższe, nad płaskim tłem lżejsze */
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--navy) 8%, transparent);
  --shadow: 0 8px 24px -12px color-mix(in srgb, var(--navy) 30%, transparent);
  --shadow-lg: 0 32px 64px -32px color-mix(in srgb, var(--navy) 45%, transparent);

  /* Krzywe. Wbudowane easingi są zbyt słabe, te pochodzą z easing.dev */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* Czasy. UI poniżej 300 ms, dłuższe tylko dla motion objaśniającego */
  --dur-press: 120ms;
  --dur-hover: 180ms;
  --dur-ui: 220ms;
  --dur-panel: 280ms;
  --dur-reveal: 620ms;

  color-scheme: light;
}