/* Dizajn tokeni — jedini izvor boja, fontova, razmaka i radijusa (ProjekatInfo/02-dizajn-sistem.md).
   Svuda u CSS-u koristi ove promenljive, ne hex vrednosti. */

:root {
  /* Boje — tamna tema */
  --bg: #0B0B0C;
  --surface-1: #141416;
  --surface-2: #1C1C1F;
  --line: #2A2A2E;
  --line-strong: #3A3A3F;
  --text: #EDEAE4;
  --muted: #8E8E93;
  --muted-2: #6E6E73;
  --accent: #FF5A1F;
  --accent-hover: #FF7A47;
  --success: #3CCB7F;
  --ruo: #F2B640;
  --error: #F2555A;
  --info: #5B9DFF;
  --label: #D9D5CD;
  --on-accent: #0B0B0C; /* tekst na narandžastoj podlozi je uvek tamni */

  /* Providne varijante (čipovi: podloga 12 %, okvir 45 %) */
  --accent-12: rgba(255, 90, 31, 0.12);
  --accent-45: rgba(255, 90, 31, 0.45);
  --text-08: rgba(237, 234, 228, 0.08);
  --success-08: rgba(60, 203, 127, 0.08);
  --success-12: rgba(60, 203, 127, 0.12);
  --success-45: rgba(60, 203, 127, 0.45);
  --ruo-06: rgba(242, 182, 64, 0.06);
  --ruo-12: rgba(242, 182, 64, 0.12);
  --ruo-45: rgba(242, 182, 64, 0.45);
  --error-08: rgba(242, 85, 90, 0.08);
  --error-12: rgba(242, 85, 90, 0.12);
  --error-45: rgba(242, 85, 90, 0.45);
  --info-12: rgba(91, 157, 255, 0.12);
  --info-45: rgba(91, 157, 255, 0.45);
  --header-bg: rgba(11, 11, 12, 0.92);
  --header-bg-mobile: rgba(11, 11, 12, 0.94);
  --overlay: rgba(0, 0, 0, 0.72);
  --badge-dark: rgba(11, 11, 12, 0.7);

  /* Boje čepova bočice (5 dozvoljenih — 02, Ilustracija bočice) */
  --cap-kost: #EDEAE4;
  --cap-grafit: #5A5A60;
  --cap-siva: #8E8E93;
  --cap-tamna: #2E2E33;
  --cap-narandzasta: #FF5A1F;

  /* Tipografija */
  --font-display: 'Archivo', 'Arial Narrow', sans-serif;
  --font-text: 'Inter', system-ui, sans-serif;
  --stretch-hero: 78%;
  --stretch-h1: 78%;
  --stretch-h2: 82%;
  --stretch-h3: 90%;
  --stretch-card: 82%;
  --fs-hero: clamp(44px, 6.2vw, 88px);
  --fs-h1: clamp(36px, 4vw, 56px);
  --fs-h2: clamp(28px, 3vw, 40px);
  --fs-h3: 24px;
  --fs-card: 20px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-xs: 13px;
  --fs-label: 12px;
  --tracking-label: 0.08em;

  /* Raspored */
  --content-max: 1344px;
  --gutter: clamp(16px, 4vw, 32px);
  --section-space: 120px;
  --header-height: 72px;
  --radius: 4px;
  --radius-pill: 999px;
  --touch: 44px;

  /* Senke — samo modal i plutajuće trake */
  --shadow-float: 0 24px 64px rgba(0, 0, 0, 0.55);

  /* Pokret */
  --ease: ease-out;
  --dur-fast: 150ms;
  --dur-base: 180ms;
  --dur-card: 200ms;
  --dur-panel: 250ms;

  /* Pozadine sekcija (prelivi iz dizajna) */
  --hero-bg: radial-gradient(55% 85% at 80% 35%, #26262B 0%, #17171A 40%, #0B0B0C 75%);
  --hero-fade: linear-gradient(90deg, rgba(11, 11, 12, 1) 0%, rgba(11, 11, 12, 0) 35%);
  --hero-bg-mobile: radial-gradient(90% 55% at 75% 22%, #27272C 0%, #17171A 45%, #0B0B0C 80%);
  --hero-fade-mobile: linear-gradient(0deg, rgba(11, 11, 12, 1) 30%, rgba(11, 11, 12, 0) 100%);
  --page-head-bg: radial-gradient(60% 120% at 85% 0%, #1C1C1F 0%, #0B0B0C 70%);
  --page-head-bg-mobile: radial-gradient(90% 60% at 85% 0%, #1C1C1F 0%, #0B0B0C 75%);
  --product-stage-bg: radial-gradient(60% 55% at 50% 44%, #2B2B30 0%, #1C1C1F 55%, #141416 100%);
  --exit-dim: rgba(0, 0, 0, 0.78);
  --entry-dim: rgba(0, 0, 0, 0.7);
  --float-bar-bg: rgba(20, 20, 22, 0.97);
  --float-button-bg: rgba(20, 20, 22, 0.92);
  --checkout-bar-bg: rgba(11, 11, 12, 0.96);
  --admin-auth-bg: radial-gradient(50% 60% at 50% 0%, #1C1C1F 0%, #0B0B0C 70%);
  --shadow-auth: 0 24px 64px rgba(0, 0, 0, 0.45);

  /* Štampa (pravni tekstovi → „Sačuvaj kao PDF”) */
  --paper: #FFFFFF;
  --paper-line: #CFCAC1;

  /* Bočica — „bina” i nalepnica */
  --stage-bg: radial-gradient(75% 60% at 50% 0%, #2B2B30 0%, #1C1C1F 70%);
  --vial-ring: linear-gradient(90deg, #4A4A50 0%, #A0A0A6 35%, #5A5A60 70%, #3A3A3F 100%);
  --vial-glass: linear-gradient(90deg, rgba(237, 234, 228, 0.16) 0%, rgba(237, 234, 228, 0.04) 28%, rgba(237, 234, 228, 0.06) 62%, rgba(237, 234, 228, 0.18) 100%);
  --vial-powder: linear-gradient(180deg, #F2EFEA 0%, #CFCAC1 100%);
  --vial-powder-flat: #DCD8D0;
}

@media (max-width: 640px) {
  :root {
    --section-space: 64px;
    --header-height: 56px;
    --fs-h3: 20px;
    --fs-card: 18px;
  }
}