/* ═══════════════════════════════════════════════════════════════════════════
   RIO ÁNGEL RESORT — DESIGN TOKENS
   Koncept „BIOREZERVA" — editorial botanical
   Vše, co Claude Code potřebuje pro barvy, typografii, spacing, grid a stíny.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ─── BARVY ─────────────────────────────────────────────────────────────
     Paleta je odvozena z loga Rio Ángel (viz 01-AUDIT.md, sekce 1.2).       */

  /* Papír / světlé plochy */
  --c-canvas:      #FAF7F1;   /* rgb(250,247,241)  hlavní pozadí            */
  --c-canvas-warm: #F6F1E7;   /* rgb(246,241,231)  alternativní pozadí      */
  --c-sand:        #EFE6D9;   /* rgb(239,230,217)  sekundární pás, karty    */
  --c-clay:        #DFCDB8;   /* rgb(223,205,184)  terciární pás, formulář  */
  --c-mocha:       #B79E88;   /* rgb(183,158,136)  hluboký písek, portréty  */

  /* Zeleň */
  --c-jungle:      #1E3A2B;   /* rgb(30,58,43)     tmavý pás, patička       */
  --c-jungle-deep: #16281E;   /* rgb(22,40,30)     nejtmavší               */
  --c-moss:        #4F6B45;   /* rgb(79,107,69)    sekundární zeleň, ikony  */
  --c-leaf:        #6BAF4A;   /* rgb(107,175,74)   akcent z loga            */

  /* Teplé akcenty */
  --c-ochre:       #C9853A;   /* rgb(201,133,58)   PLOCHY: CTA pozadí, piny, oblouky   */
  --c-ochre-dark:  #B97831;   /* rgb(185,120,49)   :active stav CTA                    */
  --c-amber:       #E3A63F;   /* rgb(227,166,63)   :hover CTA                          */
  --c-ochre-ink:   #8F571C;   /* rgb(143,87,28)    TEXT: eyebrow, odkazy, obrysy, focus
                                 Nutné kvůli WCAG — --c-ochre má na papíru jen 2,85:1,
                                 --c-ochre-ink má 5,54:1 (canvas) a 4,79:1 (sand).      */
  --c-sun:         #F1CB4B;   /* rgb(241,203,75)   akcent z loga — jen na tmavém       */

  /* Voda */
  --c-river:       #5D93B4;   /* rgb(93,147,180)   vodní akcent, odkazy     */
  --c-river-deep:  #3F6E8C;   /* rgb(63,110,140)   hover odkazů             */

  /* Text */
  --c-ink:         #231C16;   /* rgb(35,28,22)     nadpisy                  */
  --c-bark:        #5A4A3C;   /* rgb(90,74,60)     běžný text               */
  --c-bark-soft:   #7C6A59;   /* rgb(124,106,89)   sekundární text          */
  --c-on-dark:     #F2EDE3;   /* rgb(242,237,227)  text na tmavém           */
  --c-on-dark-soft:#BFCBBC;   /* rgb(191,203,188)  sekundární na tmavém     */

  /* Linky a plochy */
  --c-line:        rgba(90, 74, 60, .16);
  --c-line-strong: rgba(90, 74, 60, .32);
  --c-line-dark:   rgba(242, 237, 227, .16);
  --c-shade:       rgba(35, 28, 22, .06);

  /* Stavové */
  --c-error:       #B3492E;
  --c-success:     #4F6B45;


  /* ─── TYPOGRAFIE ─────────────────────────────────────────────────────── */
  --f-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, 'Times New Roman', serif;
  --f-sans:    'Jost', 'Futura', 'Century Gothic', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* fluidní stupnice — clamp(min, preferované, max) */
  --t-hero:    clamp(2.65rem, 1.30rem + 5.6vw, 6.25rem);   /*  42 →  100 px */
  --t-h1:      clamp(2.35rem, 1.35rem + 4.2vw, 4.75rem);   /*  38 →   76 px */
  --t-h2:      clamp(1.95rem, 1.20rem + 3.1vw, 3.75rem);   /*  31 →   60 px */
  --t-h3:      clamp(1.35rem, 1.05rem + 1.2vw, 2.00rem);   /*  22 →   32 px */
  --t-h4:      clamp(1.10rem, 1.00rem + 0.5vw, 1.35rem);   /*  18 →   22 px */
  --t-lead:    clamp(1.10rem, 1.00rem + 0.6vw, 1.45rem);   /*  18 →   23 px */
  --t-body:    clamp(1.00rem, 0.96rem + 0.2vw, 1.125rem);  /*  16 →   18 px */
  --t-small:   0.9375rem;                                   /*  15 px        */
  --t-caption: 0.8125rem;                                   /*  13 px        */
  --t-eyebrow: 0.75rem;                                     /*  12 px        */
  --t-btn:     0.8125rem;                                   /*  13 px        */
  --t-num:     clamp(2.5rem, 1.30rem + 4.6vw, 5.00rem);     /*  40 →   80 px */
  --t-num-sm:  clamp(1.75rem, 1.20rem + 2.0vw, 2.75rem);    /*  28 →   44 px */

  --lh-tight:  1.02;
  --lh-head:   1.10;
  --lh-lead:   1.55;
  --lh-body:   1.75;
  --lh-caption:1.5;

  --ls-hero:   -0.020em;
  --ls-head:   -0.012em;
  --ls-body:    0.005em;
  --ls-eyebrow: 0.28em;
  --ls-btn:     0.16em;
  --ls-label:   0.14em;


  /* ─── SPACING ────────────────────────────────────────────────────────────
     4px základ. Sekce používají --sp-section (fluidní).                     */
  --sp-1:   0.25rem;   /*   4 px */
  --sp-2:   0.5rem;    /*   8 px */
  --sp-3:   0.75rem;   /*  12 px */
  --sp-4:   1rem;      /*  16 px */
  --sp-5:   1.5rem;    /*  24 px */
  --sp-6:   2rem;      /*  32 px */
  --sp-7:   3rem;      /*  48 px */
  --sp-8:   4rem;      /*  64 px */
  --sp-9:   6rem;      /*  96 px */
  --sp-10:  8rem;      /* 128 px */
  --sp-11: 10rem;      /* 160 px */
  --sp-12: 12.5rem;    /* 200 px */

  --sp-section:  clamp(4.5rem, 2.5rem + 6.5vw, 9rem);   /*  72 → 144 px */
  --sp-section-l:clamp(6rem, 3rem + 9vw, 12.5rem);      /*  96 → 200 px */
  --sp-gap:      clamp(1.5rem, 0.8rem + 2vw, 2.5rem);   /*  24 →  40 px */


  /* ─── GRID ─────────────────────────────────────────────────────────────── */
  --h-header: 92px;     /* výška hlavičky nad hero (scrolled: 74px) */
  --w-max:    1320px;   /* hlavní kontejner                */
  --w-wide:   1560px;   /* široké sekce (galerie, mozaiky) */
  --w-text:   680px;    /* měřítko textu ≈ 62–68 znaků     */
  --w-lead:   780px;
  --w-narrow: 560px;
  --pad-x:    clamp(1.25rem, 0.6rem + 2.6vw, 3rem);  /* 20 → 48 px */
  --cols:     12;
  --gutter:   clamp(1rem, 0.4rem + 1.6vw, 2rem);     /* 16 → 32 px */
  --seam:     6px;      /* bílá spára mezi fotkami (motiv z loga) */


  /* ─── POLOMĚRY ─────────────────────────────────────────────────────────── */
  --r-photo:  2px;      /* fotografie — téměř ostré hrany (editorial) */
  --r-card:   4px;
  --r-pill:   999px;


  /* ─── STÍNY ────────────────────────────────────────────────────────────── */
  --sh-sm:  0 1px 2px rgba(35,28,22,.06), 0 2px 8px rgba(35,28,22,.05);
  --sh-md:  0 4px 12px rgba(35,28,22,.07), 0 12px 32px rgba(35,28,22,.08);
  --sh-lg:  0 8px 24px rgba(35,28,22,.10), 0 28px 64px rgba(35,28,22,.12);
  --sh-cta: 0 8px 22px rgba(201,133,58,.28);
  --sh-cta-h: 0 12px 30px rgba(201,133,58,.36);


  /* ─── PŘECHODY ─────────────────────────────────────────────────────────── */
  --e-out:   cubic-bezier(.22,.61,.36,1);
  --e-inout: cubic-bezier(.65,.05,.36,1);
  --e-soft:  cubic-bezier(.16,1,.3,1);
  --d-fast:  180ms;
  --d-base:  320ms;
  --d-slow:  620ms;
  --d-reveal: 900ms;


  /* ─── OVERLAYE NAD FOTOGRAFIEMI ───────────────────────────────────────── */
  --ov-hero: linear-gradient(180deg,
               rgba(16,27,20,.68) 0%,
               rgba(16,27,20,.42) 26%,
               rgba(16,27,20,.46) 55%,
               rgba(16,27,20,.86) 100%);
  --ov-hero-spot: radial-gradient(120% 78% at 50% 44%,
               rgba(16,27,20,.42) 0%, rgba(16,27,20,.12) 55%, rgba(16,27,20,0) 100%);
  --ov-dark: linear-gradient(180deg, rgba(18,30,22,.30), rgba(18,30,22,.72));
  --ov-band: linear-gradient(180deg, rgba(18,30,22,.55), rgba(18,30,22,.55));
  --ov-soft: linear-gradient(180deg, rgba(18,30,22,0), rgba(18,30,22,.55));


  /* ─── Z-INDEX ──────────────────────────────────────────────────────────── */
  --z-deco: 1;
  --z-body: 2;
  --z-sticky: 60;
  --z-header: 70;
  --z-menu: 80;
  --z-top: 90;
}

/* ─── BREAKPOINTY (referenčně, pro implementaci) ───────────────────────────
   xs   ≤ 479 px    malý mobil
   sm   ≥ 480 px    mobil
   md   ≥ 768 px    tablet portrait      ← zde se mění layout 1 → 2 sloupce
   lg   ≥ 1024 px   tablet landscape / malý notebook
   xl   ≥ 1280 px   desktop              ← plný 12sloupcový grid
   2xl  ≥ 1600 px   velký desktop
   ────────────────────────────────────────────────────────────────────────── */