/* =========================================================
   DEK design tokens
   Zdroj: CSS proměnné a computed styles z www.dek.cz (1. 10. 2026)
   Stav: ODVOZENO Z WEBU – neschváleno marketingem
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root {
  /* ---------- 1) Paleta 1:1 z dek.cz ---------- */
  --red-light: #e95151;
  --red: #e2001a;            /* = --brand-primary */
  --red-dark: #980000;
  --pink: #ebbcbc;

  --green-lighter: #e6f1d8;
  --green-light-2: #dce5cf;
  --green-light: #8baa41;
  --green: #2f8000;
  --green-dark: #007526;

  --blue-lightest: #edf8ff;
  --blue-lighter: #dcebf5;
  --blue-light: #62b1b4;
  --blue: #0071b8;
  --blue-dark: #1e28b4;
  --purple: #614ec8;

  --yellow-lighter: #fcfbde;
  --yellow-light: #f5ed5c;
  --yellow: #ffa200;

  --gray: #262626;           /* hlavní barva textu */
  --gray-medium: #666;
  --gray-light: #c3c3c3;
  --gray-lighter: #dfdfdf;
  --gray-lightest: #f2f2f2;
  --neutral-100: #e0e0e0;
  --neutral-800: #1a1a1a;
  --white: #fff;
  --black: #000;

  --brand-primary: #e2001a;
  --brand-secondary: #464646;

  /* ---------- 2) Sémantické tokeny – používej v aplikaci TYTO ---------- */
  --color-primary: var(--brand-primary);       /* hlavní CTA, aktivní prvky */
  --color-primary-hover: var(--red-dark);
  --color-secondary: var(--brand-secondary);   /* tmavé lišty, sekundární tlačítka */
  --color-accent: var(--yellow);               /* akce, upozornění na slevy */

  --color-text: var(--gray);
  --color-text-muted: var(--gray-medium);
  --color-text-disabled: var(--gray-light);
  --color-text-inverse: var(--white);
  --color-link: var(--blue);

  --color-bg: var(--white);
  --color-bg-subtle: var(--gray-lightest);
  --color-border: var(--gray-lighter);

  --color-success: var(--green);
  --color-success-bg: var(--green-lighter);
  --color-danger: var(--red);
  --color-danger-bg: var(--pink);
  --color-warning: var(--yellow);
  --color-warning-bg: var(--yellow-lighter);
  --color-info: var(--blue);
  --color-info-bg: var(--blue-lightest);

  /* ---------- 3) Typografie ---------- */
  --font-family: 'Roboto', Arial, sans-serif;
  --font-size-sm: 14.4px;
  --font-size-base: 16px;
  --font-size-md: 18px;      /* nejčastější velikost textu na webu */
  --font-size-lg: 22.5px;
  --font-size-xl: 27px;      /* nadpisy sekcí */
  --font-size-2xl: 30.6px;
  --font-size-3xl: 40.77px;  /* hero nadpis */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ---------- 4) Tvary, rozestupy, stíny ---------- */
  --radius-sm: 3px;
  --radius: 4px;             /* standard – web je spíš „hranatý“ */
  --gutter: 10px;
  --space-1: 5px;
  --space-2: 10px;
  --space-3: 20px;
  --space-4: 30px;
  --shadow-sm: 0 6px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 9px 27px rgba(0, 0, 0, 0.07);
  --divider: 1px 0 0 var(--gray-lighter);
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-bg);
}