/* ATENA tokens - podrazumevane vrednosti šablona (DESIGN.md §2).
   NE menja se po klijentu; klijent prepisuje u brand.css ili kroz
   <style id="atena-brand"> iz podešavanja „Atena". */
:root{
  /* Podloge */
  --at-bg:#F7F7F5;
  --at-surface:#FFFFFF;
  --at-surface-2:#EFEFEC;
  --at-panel:#141414;
  --at-panel-ink:#F7F7F5;
  --at-panel-muted:#A3A39E;

  /* Tekst */
  --at-ink:#141414;
  --at-ink-2:#3D3D3A;
  --at-muted:#6F6F6A;

  /* Linije */
  --at-line:#E2E2DE;
  --at-line-strong:#C9C9C4;

  /* Akcent */
  --at-accent:#0E4F5C;
  --at-accent-hover:#0A3B45;
  --at-accent-ink:#FFFFFF;
  --at-accent-soft:#E3EEF0;

  /* Statusi */
  --at-success:#1E7A4C; --at-success-soft:#E6F3EC;
  --at-warning:#9A6700; --at-warning-soft:#FBF1DC;
  --at-danger:#B42318;  --at-danger-soft:#FCEBEA;
  --at-sale:#C8102E;    --at-sale-soft:#FDECEE;

  /* Overlay / fokus */
  --at-overlay:rgba(20,20,20,.48);
  --at-focus:var(--at-accent);
  --at-selection-bg:var(--at-ink);
  --at-selection-ink:var(--at-bg);

  /* Tipografija */
  --at-font-display:"Bricolage Grotesque","at-display-fallback","Helvetica Neue",Arial,sans-serif;
  --at-font-body:"Hanken Grotesk","at-body-fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --at-display-weight:600;
  --at-display-tracking:-.02em;
  --at-display-lh:1.02;
  --at-body-weight:400;
  --at-body-lh:1.6;
  --at-prose-max:66ch;

  /* Skala (mobilni → desktop): display 44→96, h1 36→64, h2 28→42, h3 20→24, h4 18→20, h5 17, h6 15,
     lead 17→20, body 16, small 14, micro 12. Pomoćne: num (rednik kartice/koraka) 28→40, stat 40→72. */
  --at-fs-display:clamp(2.75rem,1.6rem + 5.2vw,6rem);
  --at-fs-h1:clamp(2.25rem,1.5rem + 3.4vw,4rem);
  --at-fs-h2:clamp(1.75rem,1.35rem + 1.8vw,2.625rem);
  --at-fs-h3:clamp(1.25rem,1.15rem + .5vw,1.5rem);
  --at-fs-h4:clamp(1.125rem,1.05rem + .3vw,1.25rem);
  --at-fs-h5:1.0625rem;
  --at-fs-h6:.9375rem;
  --at-fs-lead:clamp(1.0625rem,1rem + .35vw,1.25rem);
  --at-fs-body:1rem;
  --at-fs-small:.875rem;
  --at-fs-micro:.75rem;
  --at-fs-price:1.375rem;
  --at-fs-num:clamp(1.75rem,1.5rem + 1vw,2.5rem);
  --at-fs-stat:clamp(2.5rem,1.8rem + 3vw,4.5rem);
  --at-lh-h2:1.1; --at-lh-h3:1.2; --at-lh-h4:1.3; --at-lh-lead:1.5;

  /* Razmaci */
  --at-s-1:4px; --at-s-2:8px; --at-s-3:12px; --at-s-4:16px; --at-s-5:24px;
  --at-s-6:32px; --at-s-7:48px; --at-s-8:64px; --at-s-9:96px; --at-s-10:128px;
  --at-section:clamp(56px,2rem + 6vw,128px);      /* sekcija: 56 (mobilni) → 118 (1440) → 128 */
  --at-section-md:clamp(48px,2rem + 4vw,96px);    /* CTA traka, zaglavlje bloga/članka */
  --at-section-sm:clamp(40px,1.5rem + 3vw,72px);  /* spacing=compact, posle hero-a */
  --at-head-gap:clamp(32px,1.5rem + 2vw,56px);    /* zaglavlje sekcije → sadržaj */
  --at-gap:clamp(16px,1rem + 1vw,32px);
  --at-gutter:clamp(16px,4vw,40px);

  /* Kontrole: dugme 44 (sm 36, lg 52), polje 48; dugme uz polje = visina polja */
  --at-btn-h:44px; --at-btn-h-sm:36px; --at-btn-h-lg:52px; --at-input-h:48px;

  /* Radius, senke, z-index */
  --at-radius-sm:6px;
  --at-radius-md:10px;
  --at-radius-lg:16px;
  --at-radius-pill:999px;

  --at-shadow-tint:20,20,20;
  --at-shadow-xs:0 1px 2px rgba(var(--at-shadow-tint),.06);
  --at-shadow-sm:0 2px 6px rgba(var(--at-shadow-tint),.06),0 8px 24px rgba(var(--at-shadow-tint),.06);
  --at-shadow-md:0 4px 12px rgba(var(--at-shadow-tint),.08),0 20px 48px rgba(var(--at-shadow-tint),.10);
  --at-shadow-lg:0 12px 32px rgba(var(--at-shadow-tint),.14),0 40px 96px rgba(var(--at-shadow-tint),.16);

  --at-z-header:100; --at-z-filterbar:150; --at-z-dropdown:200; --at-z-sticky-buy:180;
  --at-z-drawer:400; --at-z-modal:500; --at-z-lightbox:550; --at-z-toast:600;

  /* Motion */
  --at-d-fast:120ms; --at-d-base:200ms; --at-d-slow:320ms; --at-d-reveal:640ms; --at-d-page:480ms;
  --at-ease-out:cubic-bezier(.22,1,.36,1);
  --at-ease-in-out:cubic-bezier(.65,0,.35,1);
  --at-ease-in:cubic-bezier(.4,0,1,1);
  --at-ease-spring:cubic-bezier(.34,1.4,.64,1);

  /* Ostalo */
  --at-header-h:72px;
  --at-filterbar-h:56px;
  --at-logo-h:28px;
  --at-ring:0 0 0 3px var(--at-accent-soft);
  --at-img-ratio-card:4/5;
  --at-img-ratio-wide:16/9;
  --at-img-ratio-hero:21/9;

  --at-container:1280px;
  --at-container-narrow:760px;
  --at-container-wide:1536px;
}