/* ==========================================================================
   KARABÍNA — design system projektu „každý deň so sebou“
   Tokens: farby, typografia, priestor, tvary, pohyb.
   Princíp: výstroj, ktorá vydrží. Teplý papier, tmavý atrament,
   signálna oranžová ako jediný hlasný akcent. Monospace štítky ako na výstroji.
   ========================================================================== */

:root {
  /* --- Základné farby (light) --- */
  --paper: #f3f0e8;          /* pozadie stránky */
  --paper-2: #e9e4d7;        /* zapustené plochy */
  --surface: #fbfaf6;        /* karty, panely */
  --ink: #17191a;            /* primárny text, tmavé plochy */
  --ink-2: #45494a;          /* sekundárny text */
  --ink-3: #62655d;          /* popisky, meta (AA aj na --paper-2) */
  --line: #d8d2c3;           /* deliace čiary */
  --line-strong: #b9b2a1;

  --signal: #cc481d;         /* záchranárska oranžová — CTA, akcent (biely text AA) */
  --signal-hover: #b13a14;
  --signal-ink: #b13a14;     /* oranžový drobný text na svetlom podklade */
  --signal-ink-inverse: #f37a52; /* oranžový text na inverznej ploche */
  --signal-soft: #f9dccf;
  --on-signal: #ffffff;

  --moss: #3f5b3a;           /* outdoor */
  --sky: #2d5c7b;            /* šport */
  --amber: #8f5f00;          /* tech */
  --cross: #b8342a;          /* zdravie */
  --graphite: #2b2f31;       /* mesto */

  --ok: #276b40;
  --ok-soft: #dcefe2;
  --warn: #8f5c08;
  --warn-soft: #f6e7c8;
  --danger: #b8342a;
  --danger-soft: #f6dad6;

  --inverse-bg: var(--ink);
  --inverse-fg: #f3f0e8;

  /* --- Typografia --- */
  --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.875rem;    /* 14 */
  --fs-md: 1rem;        /* 16 */
  --fs-lg: 1.125rem;    /* 18 */
  --fs-xl: 1.375rem;    /* 22 */
  --fs-2xl: 1.75rem;    /* 28 */
  --fs-3xl: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
  --fs-4xl: clamp(2.5rem, 1.5rem + 4.2vw, 4.25rem);

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.55;

  /* --- Priestor (4px mriežka) --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);

  /* --- Tvary --- */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --notch: 10px;             /* zrezaný roh — podpisový prvok systému */
  --border: 1px solid var(--line);
  --border-strong: 1.5px solid var(--ink);

  --shadow-1: 0 1px 0 rgba(23, 25, 26, 0.04), 0 1px 2px rgba(23, 25, 26, 0.06);
  --shadow-2: 0 2px 4px rgba(23, 25, 26, 0.05), 0 12px 32px -8px rgba(23, 25, 26, 0.18);
  --shadow-drawer: -24px 0 64px -16px rgba(23, 25, 26, 0.35);

  /* --- Pohyb --- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 360ms;

  color-scheme: light;
}

/* --- Tmavý režim: rovnaké role, iné hodnoty --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #131514;
    --paper-2: #1b1e1c;
    --surface: #1d201e;
    --ink: #eeeae0;
    --ink-2: #c3bfb4;
    --ink-3: #8e8b82;
    --line: #2f3330;
    --line-strong: #4a4f4b;

    --signal: #f06a40;
    --signal-hover: #ff7f57;
    --signal-ink: #f06a40;
    --signal-ink-inverse: #b13a14;
    --signal-soft: #3a2219;
    --on-signal: #140b07;

    --moss: #7fa173;
    --sky: #6fa3c6;
    --amber: #e0a940;
    --cross: #e46a5f;
    --graphite: #a9b0b3;

    --ok: #6cc08a;
    --ok-soft: #16301f;
    --warn: #e0a940;
    --warn-soft: #33270f;
    --danger: #e46a5f;
    --danger-soft: #3a1b18;

    --inverse-bg: #eeeae0;
    --inverse-fg: #131514;

    --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.3);
    --shadow-2: 0 12px 32px -8px rgba(0, 0, 0, 0.6);
    --shadow-drawer: -24px 0 64px -16px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #131514;
  --paper-2: #1b1e1c;
  --surface: #1d201e;
  --ink: #eeeae0;
  --ink-2: #c3bfb4;
  --ink-3: #8e8b82;
  --line: #2f3330;
  --line-strong: #4a4f4b;

  --signal: #f06a40;
  --signal-hover: #ff7f57;
  --signal-ink: #f06a40;
  --signal-ink-inverse: #b13a14;
  --signal-soft: #3a2219;
  --on-signal: #140b07;

  --moss: #7fa173;
  --sky: #6fa3c6;
  --amber: #e0a940;
  --cross: #e46a5f;
  --graphite: #a9b0b3;

  --ok: #6cc08a;
  --ok-soft: #16301f;
  --warn: #e0a940;
  --warn-soft: #33270f;
  --danger: #e46a5f;
  --danger-soft: #3a1b18;

  --inverse-bg: #eeeae0;
  --inverse-fg: #131514;

  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.3);
  --shadow-2: 0 12px 32px -8px rgba(0, 0, 0, 0.6);
  --shadow-drawer: -24px 0 64px -16px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}