/* =====================================================================
   Application Hub – design tokeny (MULTIMA)
   Jediný zdroj barev, typografie, mezer a stínů. Komponenty (app.css)
   používají VÝHRADNĚ tyto proměnné – žádné natvrdo zapsané hodnoty.
   Brand barvy převzaty z vektorových log MULTIMA (Illustrator 2023).
   ===================================================================== */

:root {
  /* --- Brand (neměnit) ------------------------------------------------ */
  --brand-charcoal: #34393b;
  --brand-navy: #004792;
  --brand-blue: #009fe3;
  --brand-yellow: #fbba00;
  --brand-orange: #ec6608;
  --brand-red: #e30613;
  --brand-green: #76b82a;
  --brand-sky-1: #00ace9;
  --brand-sky-2: #0bbbef;
  --brand-sky-3: #71cbf4;
  --brand-sky-4: #a1daf8;
  --brand-sky-5: #cbe9fc;

  /* --- Typografie ------------------------------------------------------ */
  --font-sans: "Jost", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;

  --text-xs: 0.75rem;   /* 12 */
  --text-sm: 0.875rem;  /* 14 */
  --text-md: 1rem;      /* 16 */
  --text-lg: 1.125rem;  /* 18 */
  --text-xl: 1.375rem;  /* 22 */
  --text-2xl: 1.75rem;  /* 28 */
  --text-3xl: 2.25rem;  /* 36 */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --tracking-caps: 0.08em;

  /* --- Mezery (4px mřížka) --------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* --- Tvary ----------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --border-width: 1px;

  /* --- Layout ---------------------------------------------------------- */
  --layout-max: 1200px;
  --layout-narrow: 720px;
  --header-height: 64px;

  /* --- Pohyb ----------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration: 160ms;

  /* --- Světlý režim (výchozí) ----------------------------------------- */
  color-scheme: light;

  --color-bg: #f4f6f8;
  --color-surface: #ffffff;
  --color-surface-muted: #f8fafb;
  --color-surface-sunken: #eef1f4;
  --color-border: #dfe4e8;
  --color-border-strong: #c5ccd2;

  --color-text: #34393b;
  --color-text-muted: #5f676c;
  --color-text-subtle: #80888d;
  --color-text-inverse: #ffffff;

  --color-primary: #004792;
  --color-primary-hover: #003a78;
  --color-primary-active: #002f61;
  --color-primary-soft: #e6eef7;
  --color-on-primary: #ffffff;

  --color-link: #00589f;
  --color-focus: #009fe3;

  --color-success: #3f7d12;
  --color-success-soft: #edf6e3;
  --color-warning: #8a5a00;
  --color-warning-soft: #fff6dc;
  --color-danger: #c40511;
  --color-danger-soft: #fdeaea;
  --color-info: #00589f;
  --color-info-soft: #e5f4fc;

  --color-hero-bg: #34393b;
  --color-hero-text: #ffffff;

  --shadow-sm: 0 1px 2px rgba(20, 30, 40, 0.06);
  --shadow-md: 0 2px 4px rgba(20, 30, 40, 0.05), 0 6px 16px rgba(20, 30, 40, 0.07);
  --shadow-lg: 0 8px 32px rgba(20, 30, 40, 0.14);

  /* Grafy – kategorické barvy řad (specifikace 12.4; ověřené i pro barvoslepé). Ne barvy značky. */
  --chart-1: #2a78d6;
  --chart-2: #eb6834;
  --chart-3: #1baf7a;
  --chart-4: #eda100;

  /* Akcenty dlaždic – barvy kuliček z loga */
  --accent-1: var(--brand-blue);
  --accent-2: var(--brand-green);
  --accent-3: var(--brand-orange);
  --accent-4: var(--brand-yellow);
  --accent-5: var(--brand-red);
  --accent-6: var(--brand-navy);
}

/* --- Tmavý režim: podle systému, pokud není vynucen světlý ------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg: #14181b;
    --color-surface: #1d2226;
    --color-surface-muted: #22282c;
    --color-surface-sunken: #171b1e;
    --color-border: #31393f;
    --color-border-strong: #44505a;

    --color-text: #e9edf0;
    --color-text-muted: #aab4bb;
    --color-text-subtle: #87929a;
    --color-text-inverse: #14181b;

    --color-primary: #5cb8f0;
    --color-primary-hover: #7cc6f3;
    --color-primary-active: #9dd4f6;
    --color-primary-soft: #16303f;
    --color-on-primary: #0a1c2b;

    --color-link: #7cc6f3;
    --color-focus: #71cbf4;

    --color-success: #9bd46a;
    --color-success-soft: #1e2d14;
    --color-warning: #f6c94a;
    --color-warning-soft: #33290d;
    --color-danger: #ff7b7b;
    --color-danger-soft: #3a1a1c;
    --color-info: #7cc6f3;
    --color-info-soft: #13293a;

    --color-hero-bg: #0f1214;
    --color-hero-text: #ffffff;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);

    --accent-6: var(--brand-sky-3);

    --chart-1: #3987e5;
    --chart-2: #d95926;
    --chart-3: #199e70;
    --chart-4: #c98500;
  }
}

/* --- Tmavý režim vynucený přepínačem ---------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #14181b;
  --color-surface: #1d2226;
  --color-surface-muted: #22282c;
  --color-surface-sunken: #171b1e;
  --color-border: #31393f;
  --color-border-strong: #44505a;

  --color-text: #e9edf0;
  --color-text-muted: #aab4bb;
  --color-text-subtle: #87929a;
  --color-text-inverse: #14181b;

  --color-primary: #5cb8f0;
  --color-primary-hover: #7cc6f3;
  --color-primary-active: #9dd4f6;
  --color-primary-soft: #16303f;
  --color-on-primary: #0a1c2b;

  --color-link: #7cc6f3;
  --color-focus: #71cbf4;

  --color-success: #9bd46a;
  --color-success-soft: #1e2d14;
  --color-warning: #f6c94a;
  --color-warning-soft: #33290d;
  --color-danger: #ff7b7b;
  --color-danger-soft: #3a1a1c;
  --color-info: #7cc6f3;
  --color-info-soft: #13293a;

  --color-hero-bg: #0f1214;
  --color-hero-text: #ffffff;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);

  --accent-6: var(--brand-sky-3);

  --chart-1: #3987e5;
  --chart-2: #d95926;
  --chart-3: #199e70;
  --chart-4: #c98500;
}