/* ============================================================
   Zlatna granica — Vežbaonica 3.0 — shared brand tokens
   Palette copied verbatim from the production app:
   vezbaonica-za-milicu/src/app/globals.css
   Shared by all three landing drafts. Each draft layers its
   own typography + atmosphere on top of these tokens.
   ============================================================ */

:root {
  /* ---- Official brand palette ---- */
  --vz-gold:        #9e6f06;  /* deeper brand ochre-gold */
  --vz-terracotta:  #a64129;  /* brand terracotta */
  --vz-cream:       #fbf7f5;  /* brand warm cream */
  --vz-warm-gray:   #6b5e50;
  --vz-mauve:       #9e8381;  /* brand mauve / taupe */
  --vz-mist:        #f3f5f8;  /* brand light cool gray */
  --vz-light-gold:  #f5e6c8;
  --vz-pale-green:  #e8f0e4;
  --vz-soft-pink:   #f5e1e1;
  --vz-white:       #ffffff;
  --vz-text:        #1a1b1e;  /* brand charcoal */
  --vz-text-dim:    #9e8381;  /* brand mauve for secondary text */

  /* ---- Derived shades/tints (hovers, gradients, depth) ---- */
  --vz-gold-deep:       #7c5704;
  --vz-gold-soft:       #b88a2a;
  --vz-gold-bright:     #c79a3c;
  --vz-terracotta-deep: #83321f;
  --vz-ink:             #2a2018;  /* warm near-black body text on cream */
  --vz-cream-deep:      #f3ece6;  /* slightly deeper cream for bands */

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 2rem;
  --radius-full: 9999px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: var(--vz-gold); color: #fff; }

/* Premium, feminine, calm focus ring (mirrors the app) */
:focus-visible {
  outline: 2px solid var(--vz-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---- Shared scroll-reveal system (driven by shared/reveal.js) ---- */
/* Hidden state applies ONLY once JS arms the page (html.reveal-armed).
   If JS is off or the reveal script never runs, content stays fully visible. */
html.reveal-armed .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1),
              transform .8s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
html.reveal-armed .reveal.in { opacity: 1; transform: none; }

/* Honour reduced motion everywhere */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}