/* ==========================================================================
   Księgowość dla IT — design tokens
   Kierunek: granat + złoto + krem, typografia serifowa z technicznym kontrapunktem.
   Nic poza zmiennymi. Zmiana marki = zmiana tego jednego pliku.
   ========================================================================== */

:root {
  /* --- Color: navy scale ------------------------------------------------ */
  --navy-950: #050c1c;
  --navy-900: #071022;
  --navy-800: #0d1a3a; /* kolor bazowy zaakceptowany przez klienta */
  --navy-700: #16264d;
  --navy-600: #223462;
  --navy-500: #33477c;

  /* --- Color: gold accent ---------------------------------------------- */
  --gold-700: #8f6f26;
  --gold-600: #a9853a;
  --gold-500: #c9a24a; /* kolor akcentu zaakceptowany przez klienta */
  --gold-400: #d9b871;
  --gold-300: #e8d5a6;

  /* --- Color: cream / paper -------------------------------------------- */
  --cream-50: #fdfbf6;
  --cream-100: #f7f3ea; /* tło zaakceptowane przez klienta */
  --cream-200: #efe8d9;
  --cream-300: #e2d8c3;

  /* --- Color: ink (tekst na kremie) ------------------------------------ */
  --ink-900: #101a2e;
  --ink-700: #2f3a50;
  --ink-600: #47526a;
  --ink-500: #626c81;
  --ink-400: #8b93a3;

  /* --- Role tokens ------------------------------------------------------ */
  --bg-page: var(--cream-100);
  --bg-panel: var(--cream-50);
  --bg-dark: var(--navy-800);
  --bg-darker: var(--navy-900);
  --text-body: var(--ink-700);
  --text-strong: var(--ink-900);
  --text-muted: var(--ink-500);
  --text-on-dark: #eee7d8;
  --text-on-dark-muted: #aab3c6;
  --accent: var(--gold-500);
  --accent-strong: var(--gold-600);
  --line: rgba(16, 26, 46, 0.14);
  --line-strong: rgba(16, 26, 46, 0.26);
  --line-on-dark: rgba(201, 162, 74, 0.28);
  --line-on-dark-soft: rgba(238, 231, 216, 0.16);

  /* --- Typography ------------------------------------------------------- */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-micro: 0.6875rem;                              /* 11px, etykiety mono */
  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  --fs-md: clamp(1.06rem, 1rem + 0.3vw, 1.19rem);
  --fs-lg: clamp(1.22rem, 1.12rem + 0.5vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --fs-2xl: clamp(1.95rem, 1.6rem + 1.7vw, 3.1rem);
  --fs-3xl: clamp(2.5rem, 1.9rem + 3.1vw, 4.6rem);
  --fs-stat: clamp(2.6rem, 1.9rem + 3vw, 4.2rem);

  --lh-tight: 1.06;
  --lh-snug: 1.24;
  --lh-body: 1.68;
  --ls-display: -0.018em;
  --ls-mono: 0.16em;
  --ls-mono-wide: 0.24em;

  /* --- Spacing (8-point) ------------------------------------------------ */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 5.5rem;
  --sp-10: 7.5rem;

  --section-y: clamp(4rem, 2.6rem + 5.4vw, 7.5rem);
  --container: 1200px;
  --container-narrow: 880px;
  --gutter: clamp(1.25rem, 0.6rem + 2.4vw, 3rem);

  /* --- Radii ------------------------------------------------------------ */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* --- Elevation -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(7, 16, 34, 0.06), 0 2px 8px rgba(7, 16, 34, 0.05);
  --shadow-md: 0 10px 30px rgba(7, 16, 34, 0.09), 0 2px 6px rgba(7, 16, 34, 0.05);
  --shadow-lg: 0 26px 70px rgba(7, 16, 34, 0.18);
  --shadow-dark: 0 24px 60px rgba(3, 8, 18, 0.5);

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.75, 0.28, 1);
  --ease-inout: cubic-bezier(0.62, 0.02, 0.24, 1);
  --dur-fast: 160ms;
  --dur-mid: 320ms;
  --dur-slow: 680ms;

  /* --- Signature: linia księgi rachunkowej ------------------------------ */
  --ledger-line: rgba(201, 162, 74, 0.10);
  --ledger-line-soft: rgba(201, 162, 74, 0.055);
  --ledger-step: 34px;

  --header-h: 76px;
  --header-h-sm: 64px;
}