/* Designové tokeny: Glamping Zahrada.
   Barvy jsou změřené z fotek, tmavé a text-safe odstíny dopočítané
   tak, aby splnily WCAG AA. Jantar #CC9C6C se na světlém pozadí NEpoužívá pro text. */

:root {
  /* plátno stanu (světlé plochy) */
  --canvas-50: #fbf6ea;
  --canvas-100: #f4ead3;
  --canvas-200: #ebdcbd;

  /* text na světlém */
  --ink-900: #2b2118;
  --ink-700: #5a4a3b;

  /* jantarové světlo */
  --amber-400: #cc9c6c; /* změřeno; jen na tmavém pozadí a jako výplň */
  --amber-500: #e3b070; /* světlo girland, tlačítko */
  --amber-glow: 255 186 110; /* rgb triplet pro záři */
  --amber-700: #8a5522; /* text a linky na světlém (≥ 4,5:1 na plátně) */

  /* cihla a tráva */
  --brick-500: #b4846c;
  --brick-700: #8a4b38;
  --grass-500: #5e8c3a;
  --grass-700: #3e5e24;

  /* modrá hodina a noc */
  --dusk-700: #1b2760;
  --dusk-900: #121838;
  --night-950: #0d1022;
  --night-ink: #14161f;

  /* text na tmavém */
  --on-dark: #fbf6ea;
  --on-dark-muted: #c9c2b4;

  /* tlačítko Rezervovat: jedno pro celý web */
  --btn-bg: var(--amber-500);
  --btn-ink: var(--night-ink);

  /* akordeon Výlety: od plátna po modrou hodinu */
  --trip-1-bg: #ebdcbd; --trip-1-ink: #2b2118;
  --trip-2-bg: #ddb98a; --trip-2-ink: #2b2118;
  --trip-3-bg: #c98f6b; --trip-3-ink: #2b2118;
  --trip-4-bg: #8a4b38; --trip-4-ink: #ffffff;
  --trip-5-bg: #3e5e24; --trip-5-ink: #ffffff;
  --trip-6-bg: #1b2760; --trip-6-ink: #ffffff;

  /* písma */
  --font-display: "Gloock", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* plynulá typografie */
  --fs-hero: clamp(2.9rem, 1rem + 8vw, 6rem);
  --fs-h2: clamp(2.1rem, 1.2rem + 3.6vw, 3.75rem);
  --fs-h3: clamp(1.5rem, 1.15rem + 1.3vw, 2.125rem);
  --fs-lead: clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-small: 0.9375rem;
  --fs-label: 0.8125rem;
  --track-label: 0.2em;

  /* prostor */
  --gutter: clamp(1.125rem, 4.5vw, 3rem);
  --container: 75rem;
  --measure: 40rem;
  --section-y: clamp(4.5rem, 2.5rem + 9vw, 9.5rem);
  --header-h: 4rem;

  /* tvary */
  --radius-s: 0.5rem;
  --radius-m: 0.875rem;
  --radius-pill: 999px;
  --hairline: 1px solid color-mix(in srgb, currentColor 18%, transparent);

  /* pohyb: jedna křivka, krátké časy pro ovládání, delší pro scénu */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 200ms;
  --t-med: 400ms;
  --t-slow: 600ms;

  /* hloubka: jen měkké stíny s posunem */
  --lift: 0 14px 30px -14px rgb(20 12 6 / 0.5);
  --lift-strong: 0 22px 44px -16px rgb(10 8 20 / 0.6);

  --focus: var(--ink-900);
}

@media (min-width: 48rem) {
  :root {
    --header-h: 4.5rem;
  }
}

[data-tone="dark"] {
  --focus: var(--amber-500);
}