/* Red Button — design tokeny (zkopírováno z Red Button Design System)
   Poměr barev: off-white 60 % · wine 20 % · anthracite 10 % · apple red 5 % · greys 5 % */

/* Rubik — primární brand font (nadpisy + text) */
@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,700;0,800;0,900;1,400;1,500;1,700&display=swap");

/* Permanent Marker — akcentový ruční font. Brand OTF s opravou české
   diakritiky — vždy preferovat před Google-hosted verzí. */
@font-face {
  font-family: "Permanent Marker";
  src: url("../fonts/permanentmarker-regular-czech-fix.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Základní paleta */
  --rb-apple-red: #fe1a3f;      /* akcent (~5 %), nikdy pozadí pro loga */
  --rb-wine: #a11834;           /* primární brand barva, tmavé plochy (~20 %) */
  --rb-anthracite: #444444;     /* text + tmavá neutrální plocha (~10 %) */
  --rb-white: #ffffff;
  --rb-off-white: #fafafa;      /* dominantní pozadí stránky (~60 %) */
  --rb-grey: #b0b2b6;
  --rb-spanish-grey: #969696;   /* tlumený text */
  --rb-button-red: #e3043a;     /* primární tlačítka */

  /* Sémantické aliasy */
  --surface-page: var(--rb-off-white);
  --surface-card: var(--rb-white);
  --surface-brand: var(--rb-wine);
  --surface-dark: var(--rb-anthracite);
  --text-heading: var(--rb-anthracite);
  --text-body: var(--rb-anthracite);
  --text-muted: var(--rb-spanish-grey);
  --text-on-dark: var(--rb-white);
  --text-accent: var(--rb-wine);
  --accent: var(--rb-apple-red);
  --link: var(--rb-apple-red);
  --button-primary: var(--rb-button-red);
  --border-subtle: #e2e2e2;
  --border-brand: var(--rb-wine);

  /* Typografie */
  --font-sans: "Rubik", "Arial", sans-serif;
  --font-accent: "Permanent Marker", "Kalam", cursive;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;
  --text-h1: 64px;
  --text-h2: 42px;
  --text-h3: 24px;
  --text-sub: 24px;
  --text-lead: 21px;
  --text-p: 18px;
  --text-button: 16px;
  --text-caption: 14px;
  --leading-tight: 1.05;
  --leading-heading: 1.15;
  --leading-body: 1.6;
  --tracking-caps: 0.08em;

  /* Spacing, radius, stíny */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-card: 6px;
  --radius-button: 6px;
  --radius-pill: 999px;
  --shadow-card: none;
  --shadow-float: 0 8px 32px rgba(68, 68, 68, 0.18);
}