/* ============================================================================
   CyberReg — Design Tokens v1.0
   Źródło prawdy dla całej identyfikacji wizualnej:
   - kolory (zgodne z księgą znaku, str. 5)
   - typografia (system fonts only — zgodnie z polityką on-prem ADR-0905)
   - skala odstępów (8-pt grid)
   - promienie, cienie, ruch
   - dark mode (świadoma inwersja palety, ten sam akcent czerwony)

   Niezmienniki:
   - Czerwień akcentowa (--cr-red) służy WYŁĄCZNIE sygnałom krytycznym (ryzyko, luki,
     overdue, error). Nigdy do podkreślenia "fajnych" funkcji.
   - Geometria znaku Evidence Ring nigdy nie jest odtwarzana w CSS — wszystkie linie
     dekoracyjne są neutralne (siatka konstrukcyjna).
   - System fonts wyłącznie (--cr-font-sans, --cr-font-serif, --cr-font-mono).
     Brak Google Fonts, CDN, embed.
   ============================================================================ */

:root {
  /* --- Kolory bazowe (księga znaku, str. 5) ------------------------------- */
  --cr-navy:           #0D2948;  /* Granat — główny tekst, brand */
  --cr-navy-rgb:       13 41 72;
  --cr-ring:           #C2C8D5;  /* Szaroniebieski pierścień */
  --cr-construction:   #BFCBDD;  /* Linie konstrukcyjne */
  --cr-red:            #AF291B;  /* Czerwień akcentowa — TYLKO ryzyko/krytyczne */
  --cr-paper:          #F6F2EA;  /* Papier / tło dokumentów */

  /* --- Pochodne tonalne (oparte o granat z różnym alfa) ------------------- */
  --cr-navy-90:        rgb(13 41 72 / 0.90);
  --cr-navy-72:        rgb(13 41 72 / 0.72);
  --cr-navy-56:        rgb(13 41 72 / 0.56);  /* tekst pomocniczy */
  --cr-navy-40:        rgb(13 41 72 / 0.40);  /* placeholder, disabled */
  --cr-navy-24:        rgb(13 41 72 / 0.24);
  --cr-navy-12:        rgb(13 41 72 / 0.12);  /* separatory */
  --cr-navy-06:        rgb(13 41 72 / 0.06);  /* powierzchnie hover */
  --cr-navy-03:        rgb(13 41 72 / 0.03);  /* zebra tabel */

  --cr-red-12:         rgb(175 41 27 / 0.12);
  --cr-red-06:         rgb(175 41 27 / 0.06);

  /* --- Powierzchnie -------------------------------------------------------- */
  /* Zasada nadrzędna: PAPIER #F6F2EA jest dominantą wszystkich powierzchni.
     Hierarchia powstaje przez LINIĘ + cień, nigdy przez "rozjaśnianie" tła.
     Cards, panels, sidebar — wszystko siedzi NA papierze, oznaczone hairline'em. */
  --cr-surface-page:        var(--cr-paper);          /* #F6F2EA */
  --cr-surface-card:        var(--cr-paper);          /* karta = papier + 1px linia */
  --cr-surface-elevated:    #FCF8EF;                  /* SUBTELNY warm-tone shift dla inputów / modal */
  --cr-surface-recessed:    rgb(13 41 72 / 0.025);    /* zagłębienia: table head, zebra, code blocks */
  --cr-surface-inverse:     var(--cr-navy);           /* sekcje na ciemnym (risk strip, footer) */
  --cr-surface-watermark:   rgb(13 41 72 / 0.04);

  /* --- Stany semantyczne (red = wyłącznie ryzyko) ------------------------- */
  --cr-risk:           var(--cr-red);
  --cr-risk-soft:      var(--cr-red-12);
  --cr-warning:        #B26A00;        /* tonalnie spokojny pomarańczowy */
  --cr-success:        #2E6B4A;        /* stonowana zieleń kompensująca */
  --cr-info:           var(--cr-navy);
  --cr-neutral:        var(--cr-navy-56);

  /* --- Typografia (system fonts only) ------------------------------------- */
  --cr-font-sans:      -apple-system, BlinkMacSystemFont, "Segoe UI",
                       "Inter", "Helvetica Neue", Arial, sans-serif;
  --cr-font-serif:     "Iowan Old Style", "Apple Garamond",
                       Baskerville, "Times New Roman", serif;
  --cr-font-mono:      ui-monospace, "SF Mono", "Cascadia Code",
                       "Roboto Mono", Menlo, Consolas, monospace;

  /* Skala typograficzna — minor third (1.2) -------------------------------- */
  --cr-text-2xs:       0.6875rem;   /* 11 px — micro/badge */
  --cr-text-xs:        0.75rem;     /* 12 px — caption, footer */
  --cr-text-sm:        0.875rem;    /* 14 px — small */
  --cr-text-base:      1rem;        /* 16 px — body */
  --cr-text-lg:        1.125rem;    /* 18 px — lead */
  --cr-text-xl:        1.375rem;    /* 22 px — H4 */
  --cr-text-2xl:       1.75rem;     /* 28 px — H3 */
  --cr-text-3xl:       2.25rem;     /* 36 px — H2 */
  --cr-text-4xl:       3rem;        /* 48 px — H1 */
  --cr-text-display:   4rem;        /* 64 px — hero */

  --cr-leading-tight:  1.15;
  --cr-leading-snug:   1.30;
  --cr-leading-normal: 1.55;
  --cr-leading-loose:  1.75;

  --cr-weight-regular: 400;
  --cr-weight-medium:  500;
  --cr-weight-semi:    600;
  --cr-weight-bold:    700;

  --cr-tracking-tight: -0.01em;     /* duże nagłówki */
  --cr-tracking-base:  0;
  --cr-tracking-wide:  0.06em;      /* mikrocaps, etykiety */

  /* --- Skala odstępów (8-pt grid) ----------------------------------------- */
  --cr-space-0:        0;
  --cr-space-1:        0.25rem;     /*  4 */
  --cr-space-2:        0.5rem;      /*  8 */
  --cr-space-3:        0.75rem;     /* 12 */
  --cr-space-4:        1rem;        /* 16 */
  --cr-space-5:        1.5rem;      /* 24 */
  --cr-space-6:        2rem;        /* 32 */
  --cr-space-7:        3rem;        /* 48 */
  --cr-space-8:        4rem;        /* 64 */
  --cr-space-9:        6rem;        /* 96 */
  --cr-space-10:       8rem;        /* 128 */

  /* --- Promienie (raczej małe — produkt regulacyjny, nie konsumencki) ----- */
  --cr-radius-none:    0;
  --cr-radius-sm:      2px;
  --cr-radius-md:      4px;
  --cr-radius-lg:      8px;
  --cr-radius-pill:    999px;        /* tylko dla tag/badge */

  /* --- Linie i podziały --------------------------------------------------- */
  --cr-border-hairline: 1px solid var(--cr-navy-12);
  --cr-border-card:     1px solid var(--cr-navy-12);
  --cr-border-strong:   1px solid var(--cr-navy-24);
  --cr-rule-construction: 1px solid var(--cr-construction);  /* dekoracyjne linie konstrukcyjne */

  /* --- Cienie (BARDZO subtelne — to produkt regulacyjny) ----------------- */
  --cr-shadow-none:    none;
  --cr-shadow-xs:      0 1px 2px rgb(13 41 72 / 0.04);
  --cr-shadow-sm:      0 1px 3px rgb(13 41 72 / 0.06), 0 1px 2px rgb(13 41 72 / 0.04);
  --cr-shadow-md:      0 4px 12px rgb(13 41 72 / 0.06), 0 1px 3px rgb(13 41 72 / 0.04);
  --cr-shadow-lg:      0 12px 32px rgb(13 41 72 / 0.08), 0 4px 12px rgb(13 41 72 / 0.04);
  --cr-shadow-inner:   inset 0 1px 0 rgb(13 41 72 / 0.04);

  /* --- Layout ------------------------------------------------------------- */
  --cr-content-max:    1200px;
  --cr-content-narrow: 720px;        /* dla artykułów, długiego tekstu */
  --cr-content-prose:  640px;        /* czytelność prose */
  --cr-sidebar-w:      264px;
  --cr-sidebar-w-collapsed: 64px;
  --cr-header-h:       64px;

  /* --- Ruch (subtelny — szanuje prefers-reduced-motion) ------------------ */
  --cr-easing-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --cr-easing-inout:   cubic-bezier(0.4, 0, 0.2, 1);

  --cr-duration-instant: 0ms;
  --cr-duration-fast:    120ms;
  --cr-duration-base:    180ms;
  --cr-duration-slow:    240ms;

  /* --- Focus ring (a11y — wymóg WCAG 2.1 AA) ----------------------------- */
  --cr-focus-ring:     0 0 0 2px var(--cr-surface-page),
                       0 0 0 4px var(--cr-navy);

  /* --- Z-index scale ------------------------------------------------------ */
  --cr-z-base:         1;
  --cr-z-sticky:       10;
  --cr-z-overlay:      20;
  --cr-z-modal:        30;
  --cr-z-toast:        40;
}

/* ============================================================================
   DARK MODE — świadoma inwersja palety.
   Granat ↔ Papier; pierścień zostaje w środku; akcent czerwony nieco jaśniejszy.
   Aktywuje się gdy: user explicit toggle (data-theme="dark") albo system pref.
   ============================================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cr-surface-page:        #0A1F36;        /* dark-mode "papier" — głęboki granat */
    --cr-surface-card:        #0A1F36;        /* karta = ten sam ton co page + hairline */
    --cr-surface-elevated:    #14304F;        /* subtelny lift dla inputów */
    --cr-surface-recessed:    rgb(240 235 224 / 0.03);
    --cr-surface-watermark:   rgb(246 242 234 / 0.04);

    --cr-navy:                #F0EBE0;        /* tekst staje się papierowy */
    --cr-navy-rgb:            240 235 224;
    --cr-navy-90:             rgb(240 235 224 / 0.92);
    --cr-navy-72:             rgb(240 235 224 / 0.72);
    --cr-navy-56:             rgb(240 235 224 / 0.56);
    --cr-navy-40:             rgb(240 235 224 / 0.40);
    --cr-navy-24:             rgb(240 235 224 / 0.20);
    --cr-navy-12:             rgb(240 235 224 / 0.12);
    --cr-navy-06:             rgb(240 235 224 / 0.06);
    --cr-navy-03:             rgb(240 235 224 / 0.03);

    --cr-paper:               #0A1F36;
    --cr-ring:                #5A6886;        /* stonowany pierścień na ciemnym tle */
    --cr-construction:        rgb(240 235 224 / 0.10);

    --cr-red:                 #D04B3B;        /* nieco jaśniejszy dla dark */

    --cr-focus-ring:          0 0 0 2px var(--cr-surface-page),
                              0 0 0 4px var(--cr-navy);
  }
}

[data-theme="dark"] {
  --cr-surface-page:        #0A1F36;
  --cr-surface-card:        #0A1F36;
  --cr-surface-elevated:    #14304F;
  --cr-surface-recessed:    rgb(240 235 224 / 0.03);
  --cr-surface-watermark:   rgb(246 242 234 / 0.04);

  --cr-navy:                #F0EBE0;
  --cr-navy-rgb:            240 235 224;
  --cr-navy-90:             rgb(240 235 224 / 0.92);
  --cr-navy-72:             rgb(240 235 224 / 0.72);
  --cr-navy-56:             rgb(240 235 224 / 0.56);
  --cr-navy-40:             rgb(240 235 224 / 0.40);
  --cr-navy-24:             rgb(240 235 224 / 0.20);
  --cr-navy-12:             rgb(240 235 224 / 0.12);
  --cr-navy-06:             rgb(240 235 224 / 0.06);
  --cr-navy-03:             rgb(240 235 224 / 0.03);

  --cr-paper:               #0A1F36;
  --cr-ring:                #5A6886;
  --cr-construction:        rgb(240 235 224 / 0.10);

  --cr-red:                 #D04B3B;

  --cr-focus-ring:          0 0 0 2px var(--cr-surface-page),
                            0 0 0 4px var(--cr-navy);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --cr-duration-fast:  0ms;
    --cr-duration-base:  0ms;
    --cr-duration-slow:  0ms;
  }
}

/* ============================================================================
   PODSTAWOWE STYLE — kompozycja z tokenów (opcjonalna baza dla nowych UI).
   To NIE jest reset CSS — tylko konwencja typograficzna i layoutowa zgodna z
   identyfikacją.
   ============================================================================ */

html {
  background: var(--cr-surface-page);
  color: var(--cr-navy);
  font-family: var(--cr-font-sans);
  font-size: var(--cr-text-base);
  line-height: var(--cr-leading-normal);
  font-weight: var(--cr-weight-regular);
  font-feature-settings: "ss01", "kern", "liga", "tnum";  /* tabular nums dla liczb regulacyjnych */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
}

/* Typografia */

.cr-display {
  font-size: var(--cr-text-display);
  line-height: var(--cr-leading-tight);
  font-weight: var(--cr-weight-bold);
  letter-spacing: var(--cr-tracking-tight);
  color: var(--cr-navy);
}

h1, .cr-h1 {
  font-size: var(--cr-text-4xl);
  line-height: var(--cr-leading-tight);
  font-weight: var(--cr-weight-bold);
  letter-spacing: var(--cr-tracking-tight);
  color: var(--cr-navy);
  margin: 0 0 var(--cr-space-5);
}

h2, .cr-h2 {
  font-size: var(--cr-text-3xl);
  line-height: var(--cr-leading-snug);
  font-weight: var(--cr-weight-semi);
  letter-spacing: var(--cr-tracking-tight);
  color: var(--cr-navy);
  margin: var(--cr-space-7) 0 var(--cr-space-4);
}

h3, .cr-h3 {
  font-size: var(--cr-text-2xl);
  line-height: var(--cr-leading-snug);
  font-weight: var(--cr-weight-semi);
  color: var(--cr-navy);
  margin: var(--cr-space-6) 0 var(--cr-space-3);
}

h4, .cr-h4 {
  font-size: var(--cr-text-xl);
  line-height: var(--cr-leading-snug);
  font-weight: var(--cr-weight-semi);
  color: var(--cr-navy);
  margin: var(--cr-space-5) 0 var(--cr-space-3);
}

.cr-eyebrow {
  font-size: var(--cr-text-xs);
  font-weight: var(--cr-weight-medium);
  letter-spacing: var(--cr-tracking-wide);
  text-transform: uppercase;
  color: var(--cr-navy-56);
  margin: 0 0 var(--cr-space-3);
}

p {
  margin: 0 0 var(--cr-space-4);
  color: var(--cr-navy-90);
  /* No global max-width — the typographic 70ch measure was clipping every
     paragraph regardless of context (step descriptions, milestone
     subtitles, document body_md) and ignored container width. Optimal
     line-length is applied per-component via .cr-prose when needed,
     never globally. */
}

.cr-prose p {
  max-width: 70ch;
}

.cr-lead {
  font-size: var(--cr-text-lg);
  line-height: var(--cr-leading-snug);
  color: var(--cr-navy);
}

.cr-muted { color: var(--cr-navy-56); }
.cr-small { font-size: var(--cr-text-sm); }
.cr-micro { font-size: var(--cr-text-xs); letter-spacing: var(--cr-tracking-wide); }

a {
  color: var(--cr-navy);
  text-decoration-color: var(--cr-navy-24);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--cr-duration-fast) var(--cr-easing-out);
}

a:hover { text-decoration-color: var(--cr-navy); }

a:focus-visible { outline: none; box-shadow: var(--cr-focus-ring); border-radius: var(--cr-radius-sm); }

code, kbd, pre, samp {
  font-family: var(--cr-font-mono);
  font-size: 0.92em;
}

/* Linia konstrukcyjna — sygnatura wizualna z księgi znaku */
.cr-construction-line {
  border: 0;
  border-top: var(--cr-rule-construction);
  margin: var(--cr-space-6) 0;
}

/* Sygnatura: kropka czerwona (węzeł evidence) — wyłącznie ryzyko */
.cr-risk-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--cr-red);
  border-radius: 999px;
  vertical-align: 0.05em;
  margin-right: var(--cr-space-2);
}

/* Watermark Evidence Ring — bardzo subtelnie w tle, jak na papierze firmowym */
.cr-watermark {
  position: relative;
  isolation: isolate;
}

.cr-watermark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/cyberreg-watermark-18.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 80% auto;
  opacity: 0.12;
  pointer-events: none;
  z-index: -1;
}

/* Kontener treści */
.cr-container {
  width: 100%;
  max-width: var(--cr-content-max);
  margin-inline: auto;
  padding-inline: var(--cr-space-5);
}

.cr-container-narrow {
  max-width: var(--cr-content-narrow);
}

/* Karta — siedzi NA papierze, oznaczona hairline'em. Bez tła "elevation". */
.cr-card {
  background: var(--cr-surface-card);          /* = papier */
  border: var(--cr-border-card);
  border-radius: var(--cr-radius-lg);
  padding: var(--cr-space-5);
}

/* Wariant "elevated" dla modali, dropdownów — subtelny warm shift + delikatny cień.
   Używany WYŁĄCZNIE dla overlay'i nad treścią, nie dla zwykłych kart. */
.cr-card-elevated {
  background: var(--cr-surface-elevated);
  box-shadow: var(--cr-shadow-md);
}

/* Strefa zagłębiona (recessed) — table head, code block, zebra row.
   Subtelnie ciemniejsza od papieru, NIE jaśniejsza. */
.cr-recessed {
  background: var(--cr-surface-recessed);
}

/* Tabele — minimalistyczne, audytowalne */
.cr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cr-text-sm);
  font-variant-numeric: tabular-nums;
}

.cr-table th,
.cr-table td {
  padding: var(--cr-space-3) var(--cr-space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--cr-border-hairline);
}

.cr-table th {
  font-size: var(--cr-text-xs);
  letter-spacing: var(--cr-tracking-wide);
  text-transform: uppercase;
  font-weight: var(--cr-weight-medium);
  color: var(--cr-navy-56);
  background: transparent;
}

.cr-table tbody tr:hover { background: var(--cr-navy-03); }

/* Buttony */
.cr-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--cr-space-2);
  padding: var(--cr-space-3) var(--cr-space-5);
  font: inherit;
  font-size: var(--cr-text-sm);
  font-weight: var(--cr-weight-medium);
  letter-spacing: 0;
  border-radius: var(--cr-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--cr-duration-fast) var(--cr-easing-out),
              border-color var(--cr-duration-fast) var(--cr-easing-out),
              color var(--cr-duration-fast) var(--cr-easing-out);
}

.cr-btn-primary {
  background: var(--cr-navy);
  color: var(--cr-paper);
}
.cr-btn-primary:hover { background: var(--cr-navy-90); }

.cr-btn-secondary {
  background: transparent;
  color: var(--cr-navy);
  border-color: var(--cr-navy-24);
}
.cr-btn-secondary:hover { border-color: var(--cr-navy); background: var(--cr-navy-06); }

.cr-btn-ghost {
  background: transparent;
  color: var(--cr-navy);
}
.cr-btn-ghost:hover { background: var(--cr-navy-06); }

.cr-btn:focus-visible { outline: none; box-shadow: var(--cr-focus-ring); }
.cr-btn:disabled, .cr-btn[aria-disabled="true"] {
  opacity: 0.45; pointer-events: none;
}

/* Badge */
.cr-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--cr-space-1);
  padding: 2px var(--cr-space-2);
  font-size: var(--cr-text-2xs);
  font-weight: var(--cr-weight-medium);
  letter-spacing: var(--cr-tracking-wide);
  text-transform: uppercase;
  border-radius: var(--cr-radius-pill);
  border: 1px solid var(--cr-navy-24);
  color: var(--cr-navy-72);
  background: transparent;
}

.cr-badge-risk {
  color: var(--cr-red);
  border-color: var(--cr-red);
  background: var(--cr-red-06);
}

.cr-badge-info {
  color: var(--cr-navy);
  border-color: var(--cr-navy);
  background: var(--cr-navy-06);
}

/* Input — tło SUBTELNIE jaśniejsze od papieru (warm shift #FCF8EF), nie białe.
   To zachowuje papierową dominantę i nie wprowadza obcego tonu. */
.cr-input,
.cr-textarea,
.cr-select {
  width: 100%;
  font: inherit;
  font-size: var(--cr-text-sm);
  padding: var(--cr-space-3) var(--cr-space-4);
  background: var(--cr-surface-elevated);   /* warm shift #FCF8EF */
  color: var(--cr-navy);
  border: var(--cr-border-card);
  border-radius: var(--cr-radius-md);
  transition: border-color var(--cr-duration-fast) var(--cr-easing-out),
              box-shadow var(--cr-duration-fast) var(--cr-easing-out);
}

.cr-input:focus-visible,
.cr-textarea:focus-visible,
.cr-select:focus-visible {
  outline: none;
  border-color: var(--cr-navy);
  box-shadow: var(--cr-focus-ring);
}

/* Sygnatura: stopka z fragmentem ścieżki ewidencyjnej.
   Cytat z księgi znaku — pozioma linia z przerwą i kropką.
   Używana w papierze firmowym i stopce strony. */
.cr-evidence-path {
  display: flex;
  align-items: center;
  gap: var(--cr-space-3);
  color: var(--cr-navy-56);
  font-size: var(--cr-text-xs);
  letter-spacing: var(--cr-tracking-wide);
  text-transform: uppercase;
}

.cr-evidence-path::before {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0,
    var(--cr-ring) 8%,
    var(--cr-ring) 42%,
    transparent 46%,
    transparent 54%,
    var(--cr-red) 56%,
    var(--cr-red) 58%,
    transparent 60%,
    var(--cr-ring) 64%,
    var(--cr-ring) 100%
  );
}

/* Drukowanie */
@media print {
  :root {
    --cr-surface-page: #FFFFFF;
    --cr-surface-card: #FFFFFF;
    --cr-surface-elevated: #FFFFFF;
  }
  html { font-size: 10pt; }
  .cr-no-print { display: none !important; }
  a { color: var(--cr-navy); text-decoration: none; }
  .cr-card { border-color: var(--cr-navy-24); }
}