/* ==========================================================================
   Tap2Memo – zajednički brand tokeni (izvor: novo/Tap2Memo_brand_guidelines.md)
   ========================================================================== */

/* Cormorant Garamond (Google Fonts, v4) ima pomaknute kvačice na malim č / š / ž (kvačica "bježi" udesno).
   Samo ta tri znaka uzimamo iz EB Garamonda (sličan rez, ispravni dijakritici), size-adjust izjednačava x-visinu. */
@font-face { font-family: "T2M Caron"; src: url("https://cdn.jsdelivr.net/fontsource/fonts/eb-garamond:vf@latest/latin-ext-wght-normal.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; unicode-range: U+010D, U+0161, U+017E; size-adjust: 90%; }
@font-face { font-family: "T2M Caron"; src: url("https://cdn.jsdelivr.net/fontsource/fonts/eb-garamond:vf@latest/latin-ext-wght-italic.woff2") format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; unicode-range: U+010D, U+0161, U+017E; size-adjust: 90%; }

:root {
  /* Paleta v4 – "višnja & zlato" (inspiracija planersvadbe.com): malo boja, puno krem prostora.
     Imena varijabli ostaju ista (blue/coral/navy…) da se svi dijelovi automatski prebojaju:
       "blue"  = višnja (glavna akcijska boja)   "navy" = tamno vino (naslovi, tamne plohe)
       "coral" = prigušena ruža                   "pink" / "blush" = puder roza
       "gold"  = zlatna (detalji)                 cream / sand / taupe = pozadine */
  --t2m-navy: #3b1d25;        /* tamno vino – naslovi, footer */
  --t2m-navy-2: #4a2430;
  --t2m-blue: #8c3a4a;        /* VIŠNJA – CTA, linkovi, naglasci */
  --t2m-blue-dark: #6f2c39;
  --t2m-blue-deep: #5a2330;
  --t2m-coral: #b8616f;       /* prigušena ruža – sekundarni naglasak */
  --t2m-coral-dark: #9c4b59;
  --t2m-pink: #d79a93;        /* dusty rose – sitni detalji */
  --t2m-blush: #f3e2de;       /* puder – pozadine bedževa */
  --t2m-gold: #c8a560;        /* zlatna – crte, brojevi, ukrasi */
  --t2m-gold-light: #e6d3a3;
  --t2m-gold-dark: #9a7a3a;
  --t2m-gold-foil: linear-gradient(135deg, #9a7a3a 0%, #e6d3a3 30%, #c8a560 55%, #f4e8c8 72%, #a8874a 100%);
  /* Svijetle pozadine */
  --t2m-cream: #faf7f2;
  --t2m-sand: #f3ebe2;
  --t2m-taupe: #e5dbcf;
  --t2m-brown: #6b5e54;
  --t2m-brown-dark: #2b2118;  /* tinta – osnovni tekst */
  --t2m-lightblue: #f3ebe2;   /* (ranije svijetloplava) → pijesak */
  --t2m-gray: #6b5e54;
  --t2m-warm: #faf7f2;
  --t2m-white: #fffdfa;
  --t2m-line: #e5dbcf;
  --t2m-ink: #2b2118;

  /* Tipografija */
  --t2m-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t2m-font-serif: "T2M Caron", "Cormorant Garamond", Georgia, serif;

  /* Oblik */
  --t2m-radius: 16px;
  --t2m-radius-lg: 28px;
  --t2m-shadow: 0 10px 30px rgba(59, 29, 37, 0.09);
  --t2m-shadow-lg: 0 30px 70px rgba(59, 29, 37, 0.2);

  /* Fokus */
  --t2m-focus: 0 0 0 4px rgba(140, 58, 74, 0.25);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--t2m-font-sans);
  color: var(--t2m-navy);
  background: var(--t2m-warm);
  line-height: 1.6;
  font-variant-numeric: lining-nums; /* Cormorant ima "old-style" brojke – za cijene i statistiku ravne */
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
a { color: var(--t2m-blue); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--t2m-focus); border-radius: 8px; }

/* Logo (inline SVG) – wordmark boje */
.t2m-logo { display: inline-flex; align-items: center; gap: .55em; color: var(--t2m-navy); font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.t2m-logo .wm { display: flex; flex-direction: column; }
.t2m-logo .wm b { font-weight: 700; font-size: 1em; }
.t2m-logo .wm b span { color: var(--t2m-blue); }
.t2m-logo .wm small { font-weight: 500; font-size: .32em; letter-spacing: .28em; color: var(--t2m-gray); margin-top: .35em; text-transform: uppercase; }
.t2m-logo svg { height: 1.25em; width: auto; }

/* Gumbi */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .9rem 1.5rem; border-radius: 999px; border: 2px solid transparent;
  font-weight: 600; font-size: .95rem; line-height: 1; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--t2m-blue); color: #fff; box-shadow: 0 10px 24px rgba(140, 58, 74, .32); }
.btn-primary:hover { background: var(--t2m-blue-dark); }
/* bijeli tekst na prigušenoj ruži nema dovoljan kontrast (4,2:1) → ispuna je tamnija ruža (5,9:1) */
.btn-coral { background: var(--t2m-coral-dark); color: #fff; box-shadow: 0 10px 24px rgba(156, 75, 89, .3); }
.btn-coral:hover { background: var(--t2m-blue-dark); }
.btn-outline { background: transparent; color: var(--t2m-navy); border-color: var(--t2m-navy); }
.btn-outline:hover { background: var(--t2m-navy); color: #fff; }
.btn-ghost { background: var(--t2m-lightblue); color: var(--t2m-blue); }
.btn-ghost:hover { background: #e5dbcf; }
.btn-gold { background: var(--t2m-gold-foil); color: var(--t2m-navy); box-shadow: 0 10px 24px rgba(200, 165, 96, .35); }
.btn-gold:hover { filter: brightness(1.05); }
.btn-white { background: #fff; color: var(--t2m-blue); box-shadow: 0 10px 24px rgba(59, 29, 37, .18); }
.btn-lg { padding: 1.1rem 1.9rem; font-size: 1.02rem; }
.btn-sm { padding: .6rem 1rem; font-size: .85rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none !important; }

/* Ikona u krugu (brand: pale blue / blush pozadina, linearne ikone) */
.icon-circle {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--t2m-lightblue); color: var(--t2m-blue);
}
.icon-circle.blush { background: var(--t2m-blush); color: var(--t2m-coral); }
.icon-circle svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Eyebrow / badge */
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--t2m-blue); }
.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--t2m-blush); color: var(--t2m-coral-dark); }
.badge.blue { background: var(--t2m-lightblue); color: var(--t2m-blue); }
.badge.navy { background: var(--t2m-navy); color: #fff; }
.badge.gold { background: #f5ecd9; color: var(--t2m-gold-dark); }

/* Pomoćno */
.muted { color: var(--t2m-gray); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}