/* ==========================================================================
   KONTRA — foundation.css · Akademia Claude CFS
   Fundament wizualny modułu M3 i całego huba. Self-contained (nie współdzieli
   się z innymi projektami). Mapowanie 1:1 z DESIGN.md (prymityw → semantyczny
   → komponentowy). Dołącz jako PIERWSZY arkusz w każdej stronie huba.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. KOLEJNOŚĆ WARSTW — późniejsza wygrywa niezależnie od specyficzności.
   -------------------------------------------------------------------------- */
@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; -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; }
  button { background: none; border: none; cursor: pointer; text-align: inherit; }
}

/* --------------------------------------------------------------------------
   3. TOKENY — DESIGN.md §1–5, przeliczone hex→OKLCH marki CFS.
   PRYMITYWY: nie używać w komponentach. SEMANTYCZNE: warstwa pracy.
   KOMPONENTOWE: nadpisywane przez style-pack w `themes`.
   -------------------------------------------------------------------------- */
@layer tokens {
  :root {
    /* ---- PRYMITYWY: zieleń marki (kotwica --green-500 = #35BA81 pikselowo) ---- */
    --green-50:  oklch(97.5% 0.020 160.3);
    --green-100: oklch(93.5% 0.045 160.3);
    --green-200: oklch(87%   0.075 160.3);
    --green-300: oklch(80%   0.105 160.3);
    --green-400: oklch(75%   0.128 160.3);
    --green-500: oklch(70.4% 0.142 160.3); /* KOTWICA — hex marki */
    --green-600: oklch(60.1% 0.120 160.5);
    --green-700: oklch(54%   0.107 160.2);
    --green-800: oklch(48.1% 0.095 160.0);
    --green-900: oklch(38%   0.075 159.8);

    /* ---- PRYMITYWY: neutralne (achromatyczne / prawie) ---- */
    --ink:       oklch(23.1% 0.019 172.0); /* near-black, złamany zielenią */
    --graphite:  oklch(26.8% 0.012 178.5);
    --muted:     oklch(56.6% 0.019 173.6); /* granica AA — ≥16px/regular lub 14px/600+ */
    --aluminium: oklch(72.2% 0.000 89.9);  /* RAL 9006 — NIGDY tekst */
    --line:      oklch(92.6% 0.008 164.9);
    --bg-soft:   oklch(97.7% 0.002 165.1);
    --bg:        oklch(99%   0     0);     /* off-white celowo złamany, nie czysta biel papieru */

    /* ---- PRYMITYWY: statusy (semantyka §2.1 spec zachowana, hex korygowane pod AA) ---- */
    --warning:      oklch(75.5% 0.157 78.3);
    --info:         oklch(60.9% 0.182 257.3); /* TYLKO obrys/ikona, nie wypełnienie z tekstem */
    --info-fill:    oklch(50%   0.170 257.3); /* wariant do wypełnionych plakietek, biały tekst AA */
    --danger:       oklch(59.7% 0.182 24.5);  /* ikona/obrys/duży tekst */
    --danger-text:  oklch(51.8% 0.161 24.7);  /* badge wypełniony, biały tekst 6.05:1 */

    /* ---- ODSTĘPY (skala 4px) ---- */
    --space-1:  0.25rem;  /* 4  */
    --space-2:  0.5rem;   /* 8  */
    --space-3:  0.75rem;  /* 12 */
    --space-4:  1rem;     /* 16 */
    --space-6:  1.5rem;   /* 24 */
    --space-8:  2rem;     /* 32 */
    --space-12: 3rem;     /* 48 */
    --space-16: 4rem;     /* 64 */
    --space-24: 6rem;     /* 96 */
    --space-32: 8rem;     /* 128 */

    /* ---- MARGINALIA — layout widoku lekcji (DESIGN.md §3a, v2) ---- */
    --frame-max: min(1440px, 100% - 96px);
    --reading-col: min(70ch, 100%);
    --margin-col: 260px;
    --frame-gap: clamp(64px, 6vw, 80px);
    --breakpoint-margin-stack: 1100px;

    /* ---- TYPOGRAFIA ---- */
    --font-display: "Space Grotesk", system-ui, sans-serif;
    --font-body:    "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

    --text-kicker:  0.8125rem; /* 13px */
    --text-small:   0.875rem;  /* 14px */
    --text-body:    1.125rem;  /* 18px */
    --text-h3:      1.4375rem; /* 23px */
    --text-h2:      1.8125rem; /* 29px */
    --text-h1:      clamp(1.75rem, 1.4rem + 1.5vw, 2.625rem);  /* 28→42px */
    --text-display: clamp(2.625rem, 2rem + 2.5vw, 4rem);       /* 42→64px */

    --leading-kicker: 1.4;
    --leading-small:  1.5;
    --leading-body:   1.7;
    --leading-h3:     1.3;
    --leading-h2:     1.2;
    --leading-h1:     1.15;
    --leading-display: 1.05;

    --tracking-kicker: 0.04em;
    --measure: 68ch;
    --text-margin-watermark: clamp(7.5rem, 14vw, 13.75rem); /* 120→220px, znak-wodny numeru modułu */

    /* ---- RUCH (jedna krzywa, tylko duration różnicuje skalę elementu) ---- */
    --duration-micro: 160ms;               /* hover kafla, log demo, mikro-interakcje */
    --duration-panel: 220ms;               /* jedyny duży gest strony — reveal panelu zgody (brief §9a) */
    --ease-out: cubic-bezier(0, 0, 0.2, 1);

    /* ---- Z-INDEX (normal flow; nakładki idą w top layer) ---- */
    --z-below:   -1;
    --z-noise:   10;
    --z-content: 20;
    --z-sticky:  30;
    --z-nav:     50;

    /* ---- SEMANTYCZNE (warstwa pracy) ---- */
    --surface-page:    var(--bg);
    --surface-canvas:  var(--bg-soft);
    --surface-inverse: var(--graphite);
    --surface-card:    var(--bg);

    --text-primary:     var(--ink);
    --text-muted:       var(--muted);
    --text-on-inverse:  var(--bg-soft);
    --text-on-action:   var(--ink);  /* na --green-500, 6.78:1 */
    --text-on-strong:   var(--bg);   /* na --green-800, 6.19:1 */

    --border-subtle:  var(--line);
    --border-material: color-mix(in oklch, var(--aluminium), transparent 60%);

    --surface-action-primary: var(--green-500);
    --surface-action-hover:   var(--green-600);
    --surface-action-strong:  var(--green-800);

    --status-success-bg:  var(--green-100);
    --status-success-text: var(--green-800);
    --status-success-dot: var(--green-600);

    --status-warning-bg:  color-mix(in oklch, var(--warning) 18%, white);
    --status-warning-text: color-mix(in oklch, var(--warning) 70%, var(--ink));
    --status-warning-dot: var(--warning);

    --status-neutral-bg:  var(--bg-soft);
    --status-neutral-text: var(--muted);
    --status-neutral-dot: var(--aluminium);

    --status-danger-bg:   color-mix(in oklch, var(--danger) 14%, white);
    --status-danger-text: var(--danger-text);
    --status-danger-dot:  var(--danger);

    --status-info-border: var(--info);
    --status-info-fill:   var(--info-fill);

    --focus-ring: var(--green-700);

    /* ---- KOMPONENTOWE (nadpisywane przez style-pack w `themes`) ---- */
    --radius-tile:   4px;
    --radius-card:   8px;
    --radius-button: 4px;
    --radius-xs:     2px;
    --radius-pill:   999px;

    --texture-line: repeating-linear-gradient(
      100deg,
      color-mix(in oklch, var(--aluminium), transparent 40%) 0 1px,
      transparent 1px 64px
    );
  }
}

/* --------------------------------------------------------------------------
   4. BAZA
   -------------------------------------------------------------------------- */
@layer base {
  :root { color-scheme: light; }

  html { scroll-behavior: smooth; }

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

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: var(--leading-h3);
    letter-spacing: -0.01em;
    text-wrap: balance;
  }

  p, .prose { text-wrap: pretty; max-inline-size: var(--measure); }

  a { color: var(--green-700); text-underline-offset: 0.15em; }
  a:hover { color: var(--green-800); }

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

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

  :root { accent-color: var(--green-600); }

  .skip-link {
    position: absolute;
    left: var(--space-4);
    top: -100%;
    background: var(--ink);
    color: var(--bg);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-button);
    font-family: var(--font-display);
    font-weight: 600;
    z-index: var(--z-nav);
    transition: top var(--duration-micro) var(--ease-out);
  }
  .skip-link:focus { top: var(--space-4); }
}

/* --------------------------------------------------------------------------
   5. LAYOUT — kontenery i miary (intrinsic, brak sztywnych px)
   -------------------------------------------------------------------------- */
@layer layout {
  .wrap {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-8);
  }
  .wrap--reading {
    max-width: min(var(--measure), 100% - var(--space-12));
    margin-inline: auto;
  }
  @media (max-width: 640px) {
    .wrap { padding-inline: var(--space-4); }
    .wrap--reading { max-width: min(var(--measure), 100% - var(--space-6)); }
  }
}

/* --------------------------------------------------------------------------
   6. KOMPONENTY WSPÓLNE (reużywalne w całym hubie — przyciski, aparat
   redakcyjny, statusy). Komponenty specyficzne dla widoku lekcji → m3.css.
   -------------------------------------------------------------------------- */
@layer components {
  .kicker {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-kicker);
    line-height: var(--leading-kicker);
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
    color: var(--green-700);
  }
  .kicker--on-inverse { color: var(--green-500); }

  .num-tabular {
    font-family: var(--font-display);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-small);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-button);
    border: 1px solid transparent;
    transition: background-color var(--duration-micro) var(--ease-out),
                color var(--duration-micro) var(--ease-out),
                border-color var(--duration-micro) var(--ease-out),
                transform var(--duration-micro) var(--ease-out);
  }
  .btn:active { transform: translateY(1px); }

  .btn--primary {
    background: var(--surface-action-primary);
    color: var(--text-on-action);
  }
  .btn--primary:hover { background: var(--surface-action-hover); }

  .btn--dark {
    background: var(--ink);
    color: var(--bg);
  }
  .btn--dark:hover { background: var(--graphite); }

  .btn--ghost {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-material);
  }
  .btn--ghost:hover { border-color: var(--muted); }

  .btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .btn[aria-disabled="true"]:active { transform: none; }

  .status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-small);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.3em 0.7em;
    border-radius: var(--radius-pill);
  }
  .status-pill::before {
    content: "";
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    flex: none;
  }
  /* Wartości = data-module-status z brief §3 (state-machine na data-*, nie klasy) */
  .status-pill[data-status="nieukonczony"] {
    background: var(--status-neutral-bg);
    color: var(--status-neutral-text);
    border: 1px solid var(--border-subtle);
  }
  .status-pill[data-status="nieukonczony"]::before { background: var(--status-neutral-dot); }

  .status-pill[data-status="w-trakcie"] {
    background: var(--status-warning-bg);
    color: var(--status-warning-text);
  }
  .status-pill[data-status="w-trakcie"]::before { background: var(--status-warning-dot); }

  .status-pill[data-status="ukonczony"] {
    background: var(--status-success-bg);
    color: var(--status-success-text);
  }
  .status-pill[data-status="ukonczony"]::before { background: var(--status-success-dot); }

  .required-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-display);
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--warning);
    padding: 0.25em 0.6em;
    border-radius: var(--radius-xs);
  }

  /* ---- MASTHEAD — nav archetype całego huba (brief §5), reużywalny na każdej stronie ---- */
  .masthead {
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    background: color-mix(in oklch, var(--surface-page), transparent 6%);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-subtle);
  }
  .masthead__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding-block: var(--space-3);
    flex-wrap: wrap;
  }
  .masthead__brand {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-small);
    color: var(--text-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
  }
  .masthead__brand-sub { color: var(--text-muted); font-weight: 450; }

  .masthead__nav { display: flex; }
  .masthead__nav ol { display: flex; align-items: center; gap: var(--space-4); }
  .masthead__nav a {
    font-family: var(--font-display);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
  }
  .masthead__nav a[aria-current="page"] { color: var(--text-primary); }
  .masthead__nav a:hover { color: var(--green-700); }

  .masthead__progress {
    font-family: var(--font-display);
    font-size: var(--text-small);
    color: var(--text-muted);
    white-space: nowrap;
  }
  .masthead__progress .num-tabular { color: var(--text-primary); }

  @media (max-width: 720px) {
    .masthead__nav { display: none; }
  }
}

/* --------------------------------------------------------------------------
   7. STYLE-PACK — editorial (jedyny pack tego projektu, brief §8)
   -------------------------------------------------------------------------- */
@layer themes {
  [data-pack="editorial"] {
    --surface-action-primary: var(--green-500);
    --radius-button: 4px;
  }
}

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

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