@charset "UTF-8";
/* ==========================================================================
   Design tokens — APO100 (Biuro Tłumaczeń)
   Pomarańcz klienta + grafit. Kolory w OKLCH, kontrasty sprawdzone:
   ciemny tekst na pomarańczu 7,5:1; pomarańcz na grafitowym tle 7,5:1;
   --orange-ink na bieli 5,6:1. Białego tekstu na pomarańczu NIE używamy.
   ========================================================================== */

:root {
  /* --- Powierzchnie jasne ------------------------------------------------ */
  --bg: oklch(99% 0.002 60);
  --surface: #fff;
  --surface-2: oklch(96.3% 0.006 248);   /* chłodna szarość klienta (#f0f3f6) */

  --ink: oklch(20% 0.012 55);            /* tekst główny, ~17:1 na bieli */
  --muted: oklch(44% 0.012 55);          /* tekst drugorzędny, ~7:1 */
  --line: oklch(20% 0.012 55 / 0.12);
  --line-strong: oklch(20% 0.012 55 / 0.26);

  /* --- Grafit ------------------------------------------------------------ */
  --dark: oklch(21% 0.010 55);
  --dark-2: oklch(17% 0.010 55);
  --dark-3: oklch(27.5% 0.010 55);
  --on-dark: oklch(97% 0.004 60);
  --on-dark-muted: oklch(78% 0.010 60);  /* ~8,8:1 na --dark */
  --line-on-dark: oklch(97% 0.004 60 / 0.14);

  /* --- Marka: pomarańcz -------------------------------------------------- */
  --orange: oklch(74.9% 0.169 54);       /* #fe8b31 z tlumaczeniamt.pl */
  --orange-hover: oklch(70% 0.165 52);
  --orange-ink: oklch(52% 0.135 48);     /* pomarańcz jako TEKST na jasnym tle */
  --orange-soft: oklch(95% 0.035 60);

  /* Zgodność ze starterem (faq, reviews) */
  --accent: var(--orange);
  --accent-deep: var(--orange-ink);
  --accent-soft: var(--orange-soft);
  --stone: oklch(72% 0.01 60);

  /* --- Kształty marki (z plików shape-1..4 klienta) ---------------------- */
  --blue: oklch(51% 0.151 273);
  --yellow: oklch(81.4% 0.148 87);
  --red: oklch(62.2% 0.192 32);          /* tylko dekoracja: biały tekst nie przechodzi */
  --error: oklch(50% 0.19 29);           /* komunikaty błędów, ~5,5:1 na bieli */
  --ok: oklch(40% 0.11 150);             /* potwierdzenia */

  /* --- Cienie (ciepły odcień, niskie krycie) ----------------------------- */
  --shadow-sm: 0 1px 2px oklch(20% 0.02 55 / 0.06), 0 2px 8px oklch(20% 0.02 55 / 0.05);
  --shadow-md: 0 6px 24px oklch(20% 0.02 55 / 0.10);
  --shadow-lg: 0 18px 50px oklch(20% 0.02 55 / 0.16);
  --shadow-header: 0 8px 28px oklch(10% 0.01 55 / 0.35);

  /* --- Typografia -------------------------------------------------------- */
  --font: "Red Hat Display", "Red Hat Display Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font);
  --font-body: var(--font);

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-body: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-h4: 1.375rem;
  --fs-h3: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --fs-h2: clamp(2rem, 1.35rem + 2.7vw, 3.5rem);
  --fs-h1: clamp(2.375rem, 1.4rem + 4.2vw, 4.75rem);
  --fs-display: var(--fs-h1);

  --lh-tight: 1.06;
  --lh-snug: 1.28;
  --lh-body: 1.65;
  --tracking-tight: -0.022em;
  --tracking-wide: 0.02em;

  /* --- Odstępy ----------------------------------------------------------- */
  --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: 4.5rem;
  --space-9: 7rem;     --space-10: 10rem;
  --section-pad: clamp(4rem, 3rem + 6vw, 8rem);

  /* --- Układ ------------------------------------------------------------- */
  --container: 1240px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 4.5vw, 2.5rem);
  --header-h: 80px;
  --measure: 66ch;
  --measure-narrow: 46ch;

  /* --- Kształt: duże zaokrąglenia jak na stronie klienta ----------------- */
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --pill: 999px;

  /* --- Ruch -------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out-quint */
  --dur: 240ms;
  --dur-slow: 600ms;

  /* --- Skala z-index ----------------------------------------------------- */
  /* Panel menu mobilnego leży wewnątrz nagłówka, więc dziedziczy jego warstwę (100).
     Tło musi być poniżej nagłówka, inaczej przechwytuje kliknięcia w linki panelu. */
  --z-raised: 2;
  --z-cta: 80;
  --z-backdrop: 90;
  --z-header: 100;
  --z-panel: 130;   /* względem rodzeństwa wewnątrz nagłówka */
  --z-skip: 200;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; --dur-slow: 0ms; }
}