/* ==========================================================================
   KONTRA — foundation.css
   Fundament anty-generycznego systemu projektowego. Dołącz jako PIERWSZY
   arkusz w projekcie. Ustawia kolejność warstw, tokeny (OKLCH), ruch,
   z-index, reset, bazę, bariery dostępności i trzy style-packi.
   Potem dopisujesz tylko komponenty i kierownictwo artystyczne.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. KOLEJNOŚĆ WARSTW (jedyne miejsce, w którym ustala się priorytety).
   Późniejsza warstwa wygrywa niezależnie od specyficzności — dlatego
   `themes` nadpisuje komponenty bez !important.
   -------------------------------------------------------------------------- */
@layer reset, tokens, base, layout, components, utilities, themes;

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { min-block-size: 100svh; line-height: 1.6; -webkit-font-smoothing: antialiased; }
  img, picture, svg, video, canvas { display: block; max-inline-size: 100%; block-size: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
}

/* --------------------------------------------------------------------------
   3. TOKENY
   Poziomy: PRYMITYWY (nie używać w komponentach) → SEMANTYCZNE (warstwa pracy)
            → KOMPONENTOWE. Komponent nigdy nie sięga po prymityw.
   -------------------------------------------------------------------------- */
@layer tokens {
  :root {
    /* ---- PRYMITYWY: kolor w OKLCH ----
       Skala generowana zmianą L przy stałych C,H — percepcyjnie równe stopnie. */
    --blue-50:  oklch(0.97 0.02 255);
    --blue-100: oklch(0.93 0.05 255);
    --blue-200: oklch(0.87 0.08 255);
    --blue-300: oklch(0.79 0.12 255);
    --blue-400: oklch(0.70 0.15 255);
    --blue-500: oklch(0.62 0.17 255);
    --blue-600: oklch(0.53 0.16 255);
    --blue-700: oklch(0.45 0.14 255);
    --blue-800: oklch(0.37 0.11 255);
    --blue-900: oklch(0.29 0.08 255);

    --violet-500: oklch(0.55 0.20 300);
    --acid:       oklch(0.85 0.20 110);  /* kwasowy akcent brutalistyczny */

    --red-600:   oklch(0.55 0.20 25);
    --green-600: oklch(0.58 0.15 150);
    --amber-500: oklch(0.78 0.16 75);

    /* Neutralne: chroma bliska 0; lekka chroma daje ciepłą/zimną szarość */
    --ink:    oklch(0.22 0.01 270);
    --paper:  oklch(0.98 0.005 90);
    --gray-300: oklch(0.75 0.01 270);
    --gray-600: oklch(0.50 0.01 270);

    /* ---- SEMANTYCZNE (operuj tylko tutaj) ---- */
    --surface-action-primary: var(--blue-500);
    --text-on-action:         var(--blue-50);
    /* Stany pochodne przez color-mix — bez nowych zmiennych */
    --surface-action-hover: color-mix(in oklch, var(--surface-action-primary), black 12%);
    --surface-action-soft:  color-mix(in oklch, var(--surface-action-primary), transparent 90%);
    --border-subtle:        color-mix(in oklch, var(--ink), transparent 88%);

    --feedback-danger:  var(--red-600);
    --feedback-success: var(--green-600);
    --feedback-warning: var(--amber-500);

    --focus-ring: var(--surface-action-primary);

    /* ---- ODSTĘPY (skala modularna, baza 4px) ---- */
    --space-0:  0;
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;
    --space-40: 10rem;                       /* "przesada" z Prawa 1 */
    --spacing-fluid: clamp(1rem, 2vw, 2rem);

    /* ---- PROMIENIE / OBRAMOWANIA / BLUR ---- */
    --radius-none: 0;
    --radius-sm:   0.25rem;
    --radius-md:   0.5rem;
    --radius-lg:   1rem;
    --radius-pill: 999px;
    --border-hairline: 1px solid var(--border-subtle);
    --border-bold:     2px solid var(--ink);
    --blur-glass: 16px;
    --blur-soft:  8px;

    /* ---- CIENIE (światło fizyczne lub twardy uskok) ---- */
    --shadow-organic:
      0 1px 1px rgba(0,0,0,0.02),
      0 2px 2px rgba(0,0,0,0.03),
      0 4px 4px rgba(0,0,0,0.04),
      0 8px 8px rgba(0,0,0,0.04),
      0 16px 16px rgba(0,0,0,0.05);
    --shadow-organic-lifted: 0 24px 32px rgba(0,0,0,0.08);
    --shadow-brutal:         8px 8px 0 var(--ink);
    --shadow-brutal-lifted:  12px 12px 0 var(--ink);

    /* ---- TYPOGRAFIA (variable fonts + kontrast skali) ---- */
    --font-display: "Space Grotesk", system-ui, sans-serif;
    --font-body:    system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono:    ui-monospace, "JetBrains Mono", monospace;

    --font-size-display: clamp(3rem, 10vw, 8rem);
    --font-size-h1:      clamp(1.5rem, 4vw + 1rem, 3rem);
    --font-size-h2:      clamp(1.25rem, 2vw + 0.75rem, 2rem);
    --font-size-body:    1rem;
    --font-size-caption: 0.8125rem;

    --font-weight-regular: 400;
    --font-weight-medium:  525;               /* niestandardowa, precyzyjna waga */
    --font-weight-heavy:   850;

    --tracking-display: -0.06em;
    --tracking-tight:   -0.04em;
    --leading-tight: 0.9;
    --leading-body:  1.6;

    /* ---- RUCH (Prawo 8) ---- */
    --duration-instant:   100ms;
    --duration-snappy:    150ms;
    --duration-fast:      220ms;
    --duration-base:      320ms;
    --duration-cinematic: 800ms;

    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
    /* Prawdziwa sprężyna z odbiciami (cubic-bezier tego nie odda) */
    --ease-spring-physical: linear(
      0, 0.402 7.4%, 0.711 15.9%, 0.929 23.7%, 1.008 28.5%,
      1.067 33.9%, 1.099 39.3%, 1.097 50.5%, 1.018 73.5%, 1.001 88.7%, 1
    );

    /* ---- Z-INDEX (sztywna skala; wartości spoza skali zakazane) ---- */
    --z-below:      -1;
    --z-base:        0;
    --z-noise:      10;
    --z-content:    20;
    --z-sticky:     30;
    --z-nav:        50;
    --z-dropdown:   60;
    --z-overlay-bg: 80;
    --z-toast:     100;
    /* Nakładki (modal/popover/tooltip/menu) idą do TOP LAYER, nie tutaj. */

    /* ---- KONTENERY / MIARA ---- */
    --container-sm: 30rem;
    --container-md: 48rem;
    --container-lg: 64rem;
    --measure: 70ch;

    /* ---- POWIERZCHNIE / TEKSTURA ---- */
    --surface-muted: color-mix(in oklch, var(--paper), var(--ink) 6%);
    --surface-glass: color-mix(in srgb, var(--paper), transparent 30%);
    --texture-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");

    /* ---- TOKENY MOTYWOWALNE (flipowane przez style-packi w warstwie themes) ---- */
    --radius-base:  var(--radius-md);
    --shadow-base:  var(--shadow-organic);
    --border-base:  none;
    --surface-card: var(--paper);
  }
}

/* --------------------------------------------------------------------------
   4. BAZA
   -------------------------------------------------------------------------- */
@layer base {
  :root { color-scheme: light dark; interpolate-size: allow-keywords; }

  body {
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    line-height: var(--leading-body);
    background-color: var(--bg-primary);
    color: var(--text-primary);
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;                        /* zbliżona długość linii w nagłówku */
  }
  p, .prose { text-wrap: pretty; max-inline-size: var(--measure); } /* brak "sierot" */

  a { color: var(--surface-action-primary); text-underline-offset: 0.15em; }

  /* Autorski wskaźnik fokusu — nigdy domyślna niebieska obwódka */
  :focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
  }
  :focus:not(:focus-visible) { outline: none; }

  ::selection { background: var(--surface-action-primary); color: var(--text-on-action); }

  :root { accent-color: var(--surface-action-primary); }
}

/* --------------------------------------------------------------------------
   5. MOTYWY I STYLE-PACKS (warstwa o najwyższym priorytecie)
   -------------------------------------------------------------------------- */
@layer themes {
  /* Tryb jasny/ciemny przez light-dark() — jeden token, obie wartości */
  :root {
    --bg-primary:   light-dark(oklch(0.98 0.005 90), oklch(0.20 0.02 265));
    --text-primary: light-dark(oklch(0.22 0.01 270), oklch(0.97 0.01 90));
    --text-muted:   light-dark(oklch(0.50 0.01 270), oklch(0.72 0.02 265));
    --surface-solid: light-dark(var(--paper), oklch(0.27 0.03 265));
  }
  [data-mode="light"] { color-scheme: light; }
  [data-mode="dark"]  { color-scheme: dark; }

  /* Pacing teatralny — ciemny blok na pojedynczej sekcji (Prawo 5) */
  [data-theme="dark"] {
    --bg-primary: oklch(0.20 0.02 265);
    --surface-solid: oklch(0.27 0.03 265);
    --text-primary: oklch(0.97 0.01 90);
    --text-muted: oklch(0.72 0.02 265);
    background-color: var(--bg-primary);
    color: var(--text-primary);
  }

  /* ---- STYLE-PACK: EDITORIAL (stonowany, redakcyjny) ---- */
  [data-pack="editorial"] {
    --surface-action-primary: var(--ink);
    --radius-base: var(--radius-md);
    --shadow-base: var(--shadow-organic);
    --border-base: none;
    --surface-card: var(--surface-solid);
    --font-display: "Newsreader", Georgia, serif;
    --tracking-display: -0.02em;
  }

  /* ---- STYLE-PACK: BRUTALIST (twardy, anty-design) ---- */
  [data-pack="brutalist"] {
    --surface-action-primary: var(--acid);
    --text-on-action: var(--ink);
    --radius-base: var(--radius-none);
    --radius-md: var(--radius-none);
    --radius-lg: var(--radius-none);
    --shadow-base: var(--shadow-brutal);
    --border-base: var(--border-bold);
    --surface-card: var(--paper);
    --font-display: "Space Grotesk", system-ui, sans-serif;
  }

  /* ---- STYLE-PACK: GLASS (warstwowy, premium) ---- */
  [data-pack="glass"] {
    --surface-action-primary: var(--blue-500);
    --radius-base: var(--radius-lg);
    --radius-md: var(--radius-lg);
    --shadow-base: var(--shadow-organic);
    --border-base: 1px solid color-mix(in srgb, var(--paper), transparent 55%);
    --surface-card: var(--surface-glass);
  }
}

/* --------------------------------------------------------------------------
   6. BARIERY DOSTĘPNOŚCI (poza warstwami — muszą wygrać; Prawo 10)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass-panel, .surface-glass, [data-pack="glass"] .card {
    backdrop-filter: none !important;
    background: var(--surface-solid) !important;
  }
}

@media (prefers-contrast: more) {
  :root { --border-subtle: var(--ink); }
}