/* ============================================================
   Studio Varaždin — Design Tokens
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* ── Color Palette ── */
  --gold-deep:      hsl(43, 72%, 36%);
  --gold-mid:       hsl(44, 78%, 48%);
  --gold-bright:    hsl(47, 85%, 62%);
  --gold-foil:      hsl(45, 90%, 75%);
  --gold-glow:      hsla(43, 80%, 50%, 0.20);
  --gold-border:    hsla(43, 72%, 50%, 0.35);

  --green-void:     hsl(150, 30%, 4%);
  --green-deep:     hsl(150, 38%, 7%);
  --green-dark:     hsl(148, 32%, 11%);
  --green-mid:      hsl(148, 28%, 15%);
  --green-card:     hsl(147, 24%, 18%);
  --green-hover:    hsl(147, 24%, 22%);
  --green-border:   hsla(148, 30%, 40%, 0.20);

  --cream:          hsl(48, 25%, 90%);
  --cream-dim:      hsl(48, 15%, 70%);
  --cream-muted:    hsl(48, 10%, 50%);
  --burgundy:       hsl(345, 60%, 22%);
  --white:          #ffffff;

  /* ── Typography ── */
  --font-display:   'Cinzel Decorative', serif;
  --font-heading:   'Cinzel', serif;
  --font-body:      'Cormorant Garamond', serif;
  --font-ui:        'Inter', sans-serif;

  /* ── Spacing ── */
  --nav-height:     68px;
  --page-pad:       4vw;
  --card-gap:       8px;
  --row-pad-v:      32px;
  --section-gap:    56px;
  --hero-height:    78vh;

  /* ── Radii ── */
  --radius-card:    4px;
  --radius-modal:   8px;
  --radius-btn:     3px;

  /* ── Shadows ── */
  --shadow-card:    0 4px 24px rgba(0,0,0,0.55);
  --shadow-hover:   0 12px 48px rgba(0,0,0,0.75), 0 0 0 1px var(--gold-border);
  --shadow-modal:   0 24px 80px rgba(0,0,0,0.85);
  --glow-gold:      0 0 30px var(--gold-glow);

  /* ── Transitions ── */
  --ease-cinematic: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-entrance:  cubic-bezier(0.16, 1, 0.30, 1);
  --t-fast:         180ms;
  --t-normal:       300ms;
  --t-slow:         500ms;
  --t-hero:         800ms;

  /* ── Z-index scale ── */
  --z-base:         1;
  --z-card-hover:   100;
  --z-nav:          500;
  --z-modal:        900;
  --z-overlay:      800;
}

/* ============================================================
   Reset & Base
   ============================================================ */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body {
  background-color: var(--green-deep);
  color: var(--cream);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

:focus-visible {
  outline: 2px solid var(--gold-mid);
  outline-offset: 3px;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track { background: var(--green-deep); }
::-webkit-scrollbar-thumb {
  background: var(--gold-deep);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-mid); }

/* ============================================================
   Utility Classes
   ============================================================ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

.text-gold    { color: var(--gold-bright); }
.text-muted   { color: var(--cream-muted); }
.font-heading { font-family: var(--font-heading); }
.font-ui      { font-family: var(--font-ui); }

.gold-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
  border: none;
  margin: var(--section-gap) 0;
}