/* Adria Ice Caffe — dark mode.
 *
 * The site is built on Tailwind colour utilities (bg-cream, text-espresso, …)
 * loaded from the CDN, so there is no build step in which to add dark: variants
 * to every element. Instead the dark theme overrides the handful of utility
 * classes that carry the light surfaces, and leaves the rest alone.
 *
 * The page already alternates light bands (bg-cream / bg-white) with dark ones
 * (bg-espresso). Only the light bands need to flip; the dark bands are already
 * dark, so every class used inside them — text-cream, border-cream/…, gold,
 * vanilka — is deliberately untouched. That is why the override list below is
 * short and why switching themes cannot break the hero or the footer.
 *
 * Ambiguity worth knowing about: the same token appears in both roles at
 * different opacities. bg-cream/85 is the light header, bg-cream/10 is a chip
 * inside a dark band. They are overridden separately, by exact class.
 */

:root {
  --plocha: 250 246 238;   /* page surface   (light: cream)    */
  --karta: 255 255 255;    /* cards          (light: white)    */
  --napis: 38 25 15;       /* body text      (light: espresso) */
  --kava: 111 78 55;       /* secondary text (light: caffe)    */
  --zlata-tmava: 166 124 42; /* gold on a light surface        */
}

[data-theme="tmava"] {
  --plocha: 21 16 11;
  --karta: 31 24 17;
  --napis: 240 231 217;
  --kava: 201 164 136;
  --zlata-tmava: 219 180 95;
  color-scheme: dark;
}

/* Themed surfaces animate; nothing else does. */
body, header, section, footer { transition: background-color .25s ease, color .25s ease; }
@media (prefers-reduced-motion: reduce) {
  body, header, section, footer { transition: none; }
}

/* ---------- Light surfaces ------------------------------------------------ */
[data-theme="tmava"] .bg-cream    { background-color: rgb(var(--plocha)) !important; }
[data-theme="tmava"] .bg-cream\/85 { background-color: rgb(var(--plocha) / .85) !important; }
[data-theme="tmava"] .bg-cream\/90 { background-color: rgb(var(--plocha) / .90) !important; }
[data-theme="tmava"] .bg-cream\/95 { background-color: rgb(var(--plocha) / .95) !important; }
[data-theme="tmava"] .bg-white    { background-color: rgb(var(--karta)) !important; }

/* ---------- Text on light surfaces ---------------------------------------- */
[data-theme="tmava"] .text-espresso     { color: rgb(var(--napis)) !important; }
[data-theme="tmava"] .text-espresso\/85 { color: rgb(var(--napis) / .85) !important; }
[data-theme="tmava"] .text-espresso\/80 { color: rgb(var(--napis) / .80) !important; }
[data-theme="tmava"] .text-espresso\/75 { color: rgb(var(--napis) / .78) !important; }
[data-theme="tmava"] .text-espresso\/70 { color: rgb(var(--napis) / .75) !important; }
[data-theme="tmava"] .text-espresso\/60 { color: rgb(var(--napis) / .68) !important; }
[data-theme="tmava"] .text-espresso\/55 { color: rgb(var(--napis) / .64) !important; }
[data-theme="tmava"] .text-espresso\/50 { color: rgb(var(--napis) / .62) !important; }
[data-theme="tmava"] .text-espresso\/40 { color: rgb(var(--napis) / .55) !important; }
[data-theme="tmava"] .hover\:text-espresso:hover { color: rgb(var(--napis)) !important; }
[data-theme="tmava"] .text-caffe        { color: rgb(var(--kava)) !important; }
/* Gold reads as brown on cream; on a dark surface it has to lighten to stay legible. */
[data-theme="tmava"] .text-gold-deep    { color: rgb(var(--zlata-tmava)) !important; }
[data-theme="tmava"] .hover\:text-gold-deep:hover { color: rgb(var(--zlata-tmava)) !important; }

/* Text sitting on a gold or vanilka button must stay dark in both themes —
   these rules are more specific than the .text-espresso override above. */
[data-theme="tmava"] .bg-gold.text-espresso,
[data-theme="tmava"] .bg-vanilka.text-espresso,
[data-theme="tmava"] .bg-gold .text-espresso { color: #26190f !important; }

/* ---------- Borders and tints on light surfaces --------------------------- */
[data-theme="tmava"] .border-espresso\/5  { border-color: rgb(var(--napis) / .10) !important; }
[data-theme="tmava"] .border-espresso\/10 { border-color: rgb(var(--napis) / .16) !important; }
[data-theme="tmava"] .border-espresso\/15 { border-color: rgb(var(--napis) / .22) !important; }
[data-theme="tmava"] .hover\:border-espresso\/20:hover { border-color: rgb(var(--napis) / .30) !important; }
[data-theme="tmava"] .hover\:border-espresso\/40:hover { border-color: rgb(var(--napis) / .48) !important; }
[data-theme="tmava"] .border-caffe { border-color: rgb(var(--kava)) !important; }

[data-theme="tmava"] .bg-espresso\/5  { background-color: rgb(var(--napis) / .07) !important; }
[data-theme="tmava"] .bg-espresso\/15 { background-color: rgb(var(--napis) / .16) !important; }
[data-theme="tmava"] .bg-espresso\/30 { background-color: rgb(var(--napis) / .32) !important; }
[data-theme="tmava"] .hover\:bg-espresso\/5:hover { background-color: rgb(var(--napis) / .09) !important; }
[data-theme="tmava"] .bg-caffe\/15 { background-color: rgb(var(--kava) / .18) !important; }

/* Photographs are a touch bright against a dark page. */
[data-theme="tmava"] .tile img,
[data-theme="tmava"] main img:not([src*="logo"]) { filter: brightness(.94); }

/* ---------- Logos --------------------------------------------------------- */
/* Each logo ships in both a dark-ink and a cream version; show the one that
   suits the current header. */
.logo-tmava { display: block; }
.logo-svetla { display: none; }
[data-theme="tmava"] .logo-tmava { display: none; }
[data-theme="tmava"] .logo-svetla { display: block; }

/* ---------- Theme button -------------------------------------------------- */
#tema-toggle .ikona-tmava { display: none; }
[data-theme="tmava"] #tema-toggle .ikona-tmava { display: block; }
[data-theme="tmava"] #tema-toggle .ikona-svetla { display: none; }

/* ---------- Contrast corrections (WCAG 2.1 AA) ---------------------------- */
/* Measured on the live page, not estimated. Each rule lists the ratio it fixes.
 * The brand gold stays exactly as it is wherever it is decoration; only text
 * and focus rings — where the norm actually applies — are darkened. */

/* Focus ring was brand gold #c79a3f: 2.40:1 on cream, 2.59:1 on white cards.
 * SC 1.4.11 wants 3:1 for non-text. Espresso ring with a gold inner edge keeps
 * the brand look and lands at 13.9:1 on cream. The whole gallery is buttons,
 * so keyboard users meet this on every tile. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #26190f !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px rgba(199, 154, 63, .55) !important;
  border-radius: 4px;
}
[data-theme="tmava"] a:focus-visible, [data-theme="tmava"] button:focus-visible,
[data-theme="tmava"] input:focus-visible, [data-theme="tmava"] textarea:focus-visible,
[data-theme="tmava"] select:focus-visible, [data-theme="tmava"] summary:focus-visible,
[data-theme="tmava"] [tabindex]:focus-visible {
  outline-color: #f0e7d9 !important;
}

/* !important throughout: the Tailwind CDN builds its utilities at runtime and
 * appends them to <head> after this file, so on equal specificity it would win. */

/* gold-deep #a67c2a on cream = 3.52:1, used at 14px bold — below the 4.5:1
 * that applies under 18.66px. Darkened to #7a5a17 → 5.60:1. */
.text-gold-deep { color: #7a5a17 !important; }
.hover\:text-gold-deep:hover { color: #5f4611 !important; }

/* espresso/50 at 12px (volumes in the price list, captions) = 3.26:1 → /72 = 5.31:1 */
.text-espresso\/50 { color: rgb(38 25 15 / .72) !important; }
/* espresso/40 on "(nepovinné)" in the form = 2.50:1, the worst on the site → /68 = 4.86:1 */
.text-espresso\/40 { color: rgb(38 25 15 / .68) !important; }
/* espresso/60 on cream = 4.41:1, just under → /66 = 4.83:1 */
.text-espresso\/60 { color: rgb(38 25 15 / .66) !important; }

/* Dark theme keeps its own values for the same three (set further down);
 * these re-state them at the same weight so neither overrides the other. */
[data-theme="tmava"] .text-gold-deep { color: rgb(var(--zlata-tmava)) !important; }
[data-theme="tmava"] .text-espresso\/50 { color: rgb(var(--napis) / .62) !important; }
[data-theme="tmava"] .text-espresso\/40 { color: rgb(var(--napis) / .55) !important; }
[data-theme="tmava"] .text-espresso\/60 { color: rgb(var(--napis) / .68) !important; }

/* ---------- Scroll reveal, corrected -------------------------------------- */
/* The reveal animation starts every element at opacity 0 and only reveals it
 * once IntersectionObserver fires. Two consequences worth undoing:
 *
 * 1. Without JavaScript the whole page stayed blank. Hide only when the script
 *    is actually there to unhide (tema.js sets .js in <head>, before paint).
 * 2. The first screenful was invisible until the observer ran, so the browser
 *    measured Largest Contentful Paint from the fade rather than from the
 *    paint — the headline and hero photo were the LCP element. In the first
 *    section the movement is kept but the content stays painted throughout.
 */
html:not(.js) .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.js main > section:first-of-type .reveal { opacity: 1; transform: translateY(12px); }
.js main > section:first-of-type .reveal.is-visible { transform: none; }