/**
 * Gllity — dizajn tokeni (Faza M1)
 * Mobile-first: default = telefon; veći ekrani: @media (min-width: var u komentarima ispod).
 */

:root {
  /* === Breakpoints (koristi: @media (min-width: 480px) { … } itd.) === */
  /* --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1200px; */

  /* Boje (landing + podstranice) */
  --pink: #f7889b;
  --pink-soft: #f9c1c8;
  --pink-deep: #e85d78;
  --rose-brand: #e87990;
  --ink: #2b2b2b;
  --muted: #5c5c5c;
  --surface: #fff;
  --line: #e8e8ea;
  --footer-bg: #f4f4f6;
  /* Pozadina „app“ podstranica (odvojena od pune bijele) */
  --page-bg: #faf7f8;
  /* Chrome / PWA (uz <meta name="theme-color">) */
  --theme-color: #fff5f7;

  /* Kategorije (index) */
  --kat-section-bg: #ffb1c1;
  --kat-label-bg: #ff8da1;
  --kat-gap: 20px;

  /* Header (index) */
  --header-inner-min: 3.65rem;
  --header-h: calc(var(--header-inner-min) + 1.1rem);
  --header-nav: #333333;
  --header-grad-start: #fdecf4;
  --header-grad-mid: #fff8fb;
  --header-grad-end: #f0f5fc;

  /* Spacing skala (mobile premium = velikodusan ritam) */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --space-2xl: 2.25rem;

  /* Tipografija: min 16px sprječava iOS auto-zoom u inputima */
  --text-body: 1rem;
  --text-body-min: 16px;
  /* Touch: Apple HIG / Material preporuka */
  --touch-target-min: 44px;
}

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

html {
  -webkit-tap-highlight-color: rgba(232, 93, 120, 0.12);
}