/* ==========================================================================
   tokens.css — design tokeny (jediné místo, kde se definují barvy, písma,
   rozestupy a časování). Komponenty používají jen tyto proměnné.
   ========================================================================== */

/* Vlastní hostovaný font Outfit (nadpisy). Hostujeme lokálně kvůli GDPR
   — načítání z fonts.googleapis.com by posílalo IP návštěvníka Googlu. */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin-ext.woff2") format("woff2");
  font-weight: 300 600;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin.woff2") format("woff2");
  font-weight: 300 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Paleta "obloha" --- */
  --sky-50:  #F0F8FF;
  --sky-100: #DCEEFB;
  --sky-300: #8EC5F0;
  --sky-500: #3B8FD9;
  --sky-700: #1E5F9E;
  --sky-900: #0B2545;
  --cloud:   #FFFFFF;
  --sunrise: #FFB86B;       /* jediný teplý akcent – max. 1 prvek na obrazovku */
  --sunrise-strong: #F59A3A;

  /* --- Sémantické barvy (komponenty používají tyto, ne paletu přímo) --- */
  --bg:          var(--sky-50);
  --surface:     var(--cloud);
  --surface-alt: var(--sky-100);
  --text:        var(--sky-900);
  --text-muted:  #4A6580;
  --text-on-photo: var(--cloud);
  --link:        var(--sky-700);
  --primary:     var(--sky-700);   /* sky-500 nemá s bílým textem kontrast AA */
  --primary-hover: var(--sky-900);
  --on-primary:  var(--cloud);
  --accent:      var(--sunrise);
  --accent-hover: var(--sunrise-strong);
  --on-accent:   var(--sky-900);
  --border:      rgb(11 37 69 / 0.12);
  --focus:       var(--sky-500);
  --header-bg:   rgb(240 248 255 / 0.78);
  --placeholder-from: var(--sky-300);
  --placeholder-to:   var(--sky-100);

  /* Průhledné vrstvy (sklo) přes fotky a tmavé plochy */
  --glass:        rgb(255 255 255 / 0.1);
  --glass-hover:  rgb(255 255 255 / 0.22);
  --sun-glow:     rgb(255 255 255 / 0.9);
  --lightbox-backdrop: rgb(4 14 28 / 0.94);
  --footer-divider: rgb(220 238 251 / 0.15);
  --photo-text-shadow: 0 2px 20px rgb(11 37 69 / 0.4);

  /* Gradient přes fotky pro čitelnost textu */
  --photo-overlay: linear-gradient(to top, rgb(11 37 69 / 0.85) 0%, rgb(11 37 69 / 0.45) 45%, rgb(11 37 69 / 0.05) 100%);

  /* --- Typografie --- */
  --font-heading: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-sm:   0.875rem;
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem);
  --fs-h3:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --fs-h2:   clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-h1:   clamp(2.4rem, 1.6rem + 4vw, 4.75rem);
  --fs-price: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  --lh-body: 1.6;
  --lh-heading: 1.15;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 600;

  /* --- Rozestupy --- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: clamp(3.5rem, 2.5rem + 5vw, 7rem);   /* vertikální odsazení sekcí */

  /* --- Layout --- */
  --container: 72rem;
  --container-narrow: 46rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --header-h: 4.5rem;

  /* --- Tvary a stíny --- */
  --radius-sm: 0.5rem;
  --radius:    1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgb(11 37 69 / 0.06);
  --shadow:    0 10px 30px rgb(11 37 69 / 0.10);
  --shadow-lg: 0 20px 50px rgb(11 37 69 / 0.18);
  --blur: blur(14px);

  /* --- Pohyb --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 300ms;
  --dur:      600ms;
  --dur-slow: 800ms;
  --drift-dur: 90s;     /* pomalý drift mraků */
}

/* Dark mode – "noční let" */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #081B33;
    --surface:     var(--sky-900);
    --surface-alt: #10305A;
    --text:        #E6F1FC;
    --text-muted:  #A9C1D9;
    --link:        var(--sky-300);
    --primary:     var(--sky-300);
    --primary-hover: var(--sky-100);
    --on-primary:  var(--sky-900);
    --border:      rgb(220 238 251 / 0.14);
    --focus:       var(--sky-300);
    --header-bg:   rgb(8 27 51 / 0.78);
    --placeholder-from: var(--sky-700);
    --placeholder-to:   var(--sky-900);
    --shadow-sm: 0 2px 8px rgb(0 0 0 / 0.25);
    --shadow:    0 10px 30px rgb(0 0 0 / 0.35);
    --shadow-lg: 0 20px 50px rgb(0 0 0 / 0.45);
  }
}