/* ============================================================================
   Kontela — design tokens (single source of truth)
   Two layers: PRIMITIVES (raw, theme-agnostic) -> SEMANTIC (flip per theme).
   Components read ONLY semantic tokens. Light = :root default; dark via
   [data-theme="dark"] (explicit) or prefers-color-scheme (no-JS fallback).

   ADMIN SYNC: admin/tokens.css is the concatenation of the regions marked
   with /* >>> SHARED:* START */ ... /* <<< SHARED:* END */ below, with the
   SHARED:DARK selector rewritten from [data-theme="dark"] to :root (admin is
   dark-only). @font-face paths differ (admin: fonts/ , site: ../fonts/).
   Keep the two files in sync by hand on token changes.
   ============================================================================ */

/* ---- Inter (self-hosted; CSP font-src 'self'). Polish needs latin-ext. ---- */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/inter-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/inter-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/inter-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/inter-500-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/inter-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/inter-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/inter-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/inter-700-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
/* >>> SHARED:PRIMITIVES START (theme-agnostic; copy verbatim to admin) ------ */
  /* Brand blue ramp — identity #1F6FEB -> #13386E, accents #58A6FF / #0D3F8F */
  --blue-50:#f0f6ff;  --blue-100:#e7effd; --blue-200:#cfe0fb; --blue-300:#aecbff;
  --blue-400:#58a6ff; --blue-500:#1f6feb; --blue-600:#1a5fd0; --blue-700:#0d3f8f;
  --blue-800:#13386e;
  /* Neutral slate ramp (light surfaces/text) */
  --slate-0:#ffffff;  --slate-25:#fafbfc; --slate-50:#f4f6f8; --slate-100:#eef1f5;
  --slate-200:#dbe2ea; --slate-300:#cfd6df; --slate-400:#aab4c0; --slate-500:#8a94a3;
  --slate-600:#5d6b7a; --slate-700:#33404f; --slate-800:#1c2733;
  /* Dark-UI ink ramp (blue-tinted; reconciled from admin palette) */
  --ink-950:#0d1117; --ink-900:#0f1419; --ink-800:#161d27; --ink-750:#1a212b;
  --ink-700:#222c38; --ink-600:#2b3441; --ink-500:#3a4654; --ink-300:#8b97a7;
  --ink-100:#e6edf3;
  /* Status hues */
  --green-50:#e7f6ed; --green-100:#bfe6cd; --green-500:#1a7f4b; --green-600:#067647; --green-dark:#3fb950;
  --amber-50:#fff7ec; --amber-100:#f3d49a; --amber-500:#b45309; --amber-dark:#d29922;
  --red-50:#fdecea;   --red-100:#f6c9c4;   --red-500:#b42318;   --red-dark:#f85149;
/* <<< SHARED:PRIMITIVES END -------------------------------------------------- */

/* >>> SHARED:SCALES START (copy verbatim to admin) -------------------------- */
  /* Spacing — 4px base */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-7:28px; --sp-8:32px; --sp-9:40px; --sp-10:48px; --sp-11:56px; --sp-12:64px;
  /* Font weights (kills 650/750/800 drift) */
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  /* Radius */
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:12px; --r-2xl:16px;
  --r-pill:999px; --r-full:50%;
  /* Type scale (size + line-height) */
  --fs-2xs:11px; --lh-2xs:1.3;  --fs-xs:12px;  --lh-xs:1.4;   --fs-sm:13px; --lh-sm:1.45;
  --fs-base:14px; --lh-base:1.5; --fs-md:15px;  --lh-md:1.5;   --fs-lg:16px; --lh-lg:1.5;
  --fs-xl:18px;  --lh-xl:1.4;    --fs-2xl:20px; --lh-2xl:1.35; --fs-3xl:24px; --lh-3xl:1.3;
  --fs-4xl:26px; --lh-4xl:1.25;  --fs-5xl:32px; --lh-5xl:1.2;  --fs-6xl:38px; --lh-6xl:1.12;
  --fs-7xl:42px; --lh-7xl:1.05;
  /* Z-index */
  --z-base:0; --z-sticky:10; --z-dropdown:100; --z-overlay:1000;
  --z-modal:1100; --z-toast:1200; --z-tooltip:1300;
  /* Motion */
  --dur-instant:.05s; --dur-fast:.12s; --dur-base:.15s; --dur-slow:.25s;
  --ease-standard:cubic-bezier(.2,0,0,1); --ease-out:cubic-bezier(0,0,.2,1);
  /* Container widths (replace the 6 divergent max-widths) */
  --w-form:400px; --w-card:480px; --w-readable:680px; --w-content:760px;
  --w-app:1000px; --w-wide:1120px;
  /* Typography families */
  --font-sans:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --font-mono:ui-monospace,"Cascadia Code","Segoe UI Mono",Menlo,Consolas,monospace;
/* <<< SHARED:SCALES END ------------------------------------------------------ */

  /* ---- SEMANTIC — LIGHT (default) ---- */
  /* surfaces */
  --bg:var(--slate-50); --surface:var(--slate-0); --surface-2:var(--slate-25);
  --surface-3:var(--slate-100); --brand-wash:var(--blue-50); --field-bg:var(--slate-0);
  /* text */
  --text:var(--slate-800); --text-muted:var(--slate-600); --text-subtle:var(--slate-500);
  /* borders */
  --border:var(--slate-200); --border-strong:var(--slate-300);
  /* brand */
  --brand:var(--blue-500); --brand-hover:var(--blue-700); --brand-strong:var(--blue-700);
  --brand-contrast:#ffffff; --brand-tint:var(--blue-100);
  /* status families */
  --ok:var(--green-500);   --ok-text:var(--green-500);   --ok-bg:var(--green-50);   --ok-border:var(--green-100);
  --warn:var(--amber-500); --warn-text:var(--amber-500); --warn-bg:var(--amber-50); --warn-border:var(--amber-100);
  --risk:var(--red-500);   --risk-text:var(--red-500);   --risk-bg:var(--red-50);   --risk-border:var(--red-100);
  --info:var(--blue-500);  --info-text:var(--brand-strong); --info-bg:var(--blue-100); --info-border:var(--blue-200);
  /* effects */
  --focus-ring:rgba(31,111,235,.55); --overlay:rgba(15,20,25,.55);
  --shadow-sm:0 1px 2px rgba(20,40,60,.06);
  --shadow-md:0 1px 3px rgba(20,40,60,.08), 0 6px 18px rgba(20,40,60,.05);
  --shadow-lg:0 10px 30px rgba(20,40,60,.10);

  /* ---- LEGACY ALIASES (bridge old var names; remove after full migration) -- */
  --ink:var(--text); --muted:var(--text-muted); --line:var(--border);
  --panel:var(--surface); --brand-ink:var(--brand-strong); --strong:var(--brand-strong);
  --radius:var(--r-lg); --shadow:var(--shadow-md);
}

/* ---- SEMANTIC — DARK ----
   The block below (selector [data-theme="dark"]) is SHARED:DARK. In
   admin/tokens.css the same declarations live under :root (admin is dark-only). */
/* >>> SHARED:DARK START (in admin: rewrite selector to :root) --------------- */
:root[data-theme="dark"]{
  --bg:var(--ink-900); --surface:var(--ink-750); --surface-2:var(--ink-700);
  --surface-3:var(--ink-800); --brand-wash:rgba(88,166,255,.08); --field-bg:var(--ink-950);
  --text:var(--ink-100); --text-muted:var(--ink-300); --text-subtle:#6b7787;
  --border:var(--ink-600); --border-strong:var(--ink-500);
  --brand:var(--blue-400); --brand-hover:var(--blue-300); --brand-strong:var(--blue-400);
  --brand-contrast:#0d1117; --brand-tint:rgba(88,166,255,.15);
  --ok:var(--green-dark);   --ok-text:var(--green-dark);   --ok-bg:rgba(63,185,80,.12);   --ok-border:rgba(63,185,80,.40);
  --warn:var(--amber-dark); --warn-text:var(--amber-dark); --warn-bg:rgba(210,153,34,.12); --warn-border:rgba(210,153,34,.40);
  --risk:var(--red-dark);   --risk-text:var(--red-dark);   --risk-bg:rgba(248,81,73,.12);  --risk-border:rgba(248,81,73,.40);
  --info:var(--blue-400);   --info-text:var(--blue-400);   --info-bg:rgba(88,166,255,.12); --info-border:rgba(88,166,255,.40);
  --focus-ring:rgba(88,166,255,.65); --overlay:rgba(0,0,0,.6);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 1px 3px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.4);
  --shadow-lg:0 10px 30px rgba(0,0,0,.5);
}
/* <<< SHARED:DARK END -------------------------------------------------------- */

/* No-JS / not-yet-chosen: follow the OS. theme.js always sets [data-theme]
   when JS runs, so :not([data-theme]) makes the explicit choice win. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --bg:var(--ink-900); --surface:var(--ink-750); --surface-2:var(--ink-700);
    --surface-3:var(--ink-800); --brand-wash:rgba(88,166,255,.08); --field-bg:var(--ink-950);
    --text:var(--ink-100); --text-muted:var(--ink-300); --text-subtle:#6b7787;
    --border:var(--ink-600); --border-strong:var(--ink-500);
    --brand:var(--blue-400); --brand-hover:var(--blue-300); --brand-strong:var(--blue-400);
    --brand-contrast:#0d1117; --brand-tint:rgba(88,166,255,.15);
    --ok:var(--green-dark);   --ok-text:var(--green-dark);   --ok-bg:rgba(63,185,80,.12);   --ok-border:rgba(63,185,80,.40);
    --warn:var(--amber-dark); --warn-text:var(--amber-dark); --warn-bg:rgba(210,153,34,.12); --warn-border:rgba(210,153,34,.40);
    --risk:var(--red-dark);   --risk-text:var(--red-dark);   --risk-bg:rgba(248,81,73,.12);  --risk-border:rgba(248,81,73,.40);
    --info:var(--blue-400);   --info-text:var(--blue-400);   --info-bg:rgba(88,166,255,.12); --info-border:rgba(88,166,255,.40);
    --focus-ring:rgba(88,166,255,.65); --overlay:rgba(0,0,0,.6);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 1px 3px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.4);
    --shadow-lg:0 10px 30px rgba(0,0,0,.5);
  }
}