/* ============================================
   Design Tokens — Ljekarne Filipović
   Boje izvedene iz loga (lime + warm gray)
   ============================================ */

:root {
  /* ---------- Brand Colors ---------- */
  --brand:           #95C93D;   /* lime green iz loga (dominantna) */
  --brand-hover:     #8AB838;
  --brand-dark:      #6FAA3F;   /* tamniji zeleni iz check uzorka */
  --brand-deep:      #4A7A2C;   /* duboki ton — naslovi na zelenoj */
  --brand-soft:      #D9E9AC;   /* lagani lime za pozadine sekcija */
  --brand-gray:      #8B8B8B;   /* gray iz "filipović" */

  /* ---------- Warm Accent (natural / wellness) ---------- */
  --accent:          #C19660;   /* prigušena terakota / med */
  --accent-soft:     #F0DEC4;
  --accent-deep:     #8A6A40;

  /* ---------- Surface ---------- */
  --bg:              #FFFFFF;
  --bg-soft:         #F8FAF1;   /* topao zeleno-bijeli, alternacija */
  --bg-accent:       #EEF5DC;   /* svjetlozeleni za istaknute blokove */
  --bg-warm:         #FAF6EF;   /* topao za partner/wellness sekcije */

  /* ---------- Text ---------- */
  --text:            #1F2A14;   /* tamna zelena umjesto crne */
  --text-muted:      #5F6B5A;
  --text-subtle:     #8B958A;
  --text-on-brand:   #FFFFFF;
  --text-on-dark:    #F8FAF1;

  /* ---------- Lines ---------- */
  --border:          #E4EAD6;
  --border-strong:   #C9D5A9;
  --border-soft:     #F0F4E0;

  /* ---------- States ---------- */
  --success:         #4A9D5E;
  --warning:         #E8A93A;
  --error:           #D14545;
  --info:            #4A8FB8;

  /* ---------- Shadows ---------- */
  --shadow-sm:       0 1px 2px rgba(31, 42, 20, 0.05);
  --shadow-md:       0 2px 8px rgba(31, 42, 20, 0.06), 0 1px 2px rgba(31, 42, 20, 0.04);
  --shadow-lg:       0 8px 24px rgba(31, 42, 20, 0.08), 0 2px 6px rgba(31, 42, 20, 0.04);
  --shadow-xl:       0 16px 48px rgba(31, 42, 20, 0.12);
  --shadow-brand:    0 6px 16px rgba(149, 201, 61, 0.25);

  /* ---------- Typography ---------- */
  --font-body:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading:    'Nunito', 'Inter', sans-serif;

  /* font sizes (clamp for fluid scaling) */
  --fs-xs:           0.75rem;     /* 12 */
  --fs-sm:           0.875rem;    /* 14 */
  --fs-base:         1rem;        /* 16 */
  --fs-md:           1.125rem;    /* 18 */
  --fs-lg:           1.25rem;     /* 20 */
  --fs-xl:           1.5rem;      /* 24 */
  --fs-2xl:          clamp(1.625rem, 2.5vw, 1.875rem);   /* 26-30 */
  --fs-3xl:          clamp(1.875rem, 3vw, 2.25rem);      /* 30-36 */
  --fs-4xl:          clamp(2.25rem, 4vw, 3rem);          /* 36-48 */
  --fs-5xl:          clamp(2.75rem, 5vw, 3.75rem);       /* 44-60 */
  --fs-hero:         clamp(2.5rem, 5.5vw, 4.25rem);      /* 40-68 */

  /* line heights */
  --lh-tight:        1.15;
  --lh-snug:         1.3;
  --lh-normal:       1.5;
  --lh-relaxed:      1.65;
  --lh-loose:        1.8;

  /* letter spacing */
  --ls-tight:        -0.02em;
  --ls-normal:       0;
  --ls-wide:         0.04em;
  --ls-wider:        0.08em;

  /* ---------- Spacing (4px scale) ---------- */
  --space-1:         0.25rem;     /* 4 */
  --space-2:         0.5rem;      /* 8 */
  --space-3:         0.75rem;     /* 12 */
  --space-4:         1rem;        /* 16 */
  --space-5:         1.25rem;     /* 20 */
  --space-6:         1.5rem;      /* 24 */
  --space-8:         2rem;        /* 32 */
  --space-10:        2.5rem;      /* 40 */
  --space-12:        3rem;        /* 48 */
  --space-16:        4rem;        /* 64 */
  --space-20:        5rem;        /* 80 */
  --space-24:        6rem;        /* 96 */
  --space-32:        8rem;        /* 128 */

  /* section padding (vertical) */
  --section-y:       clamp(3.5rem, 8vw, 6rem);
  --section-y-sm:    clamp(2.5rem, 5vw, 4rem);

  /* ---------- Radius ---------- */
  --r-xs:            4px;
  --r-sm:            8px;
  --r-md:            12px;
  --r-lg:            16px;
  --r-xl:            20px;
  --r-2xl:           28px;
  --r-pill:          999px;

  /* ---------- Layout ---------- */
  --container:       1200px;
  --container-narrow: 880px;
  --container-text:  680px;
  --gutter:          clamp(1rem, 4vw, 2rem);

  /* ---------- Transitions ---------- */
  --t-fast:          150ms ease;
  --t-base:          250ms ease;
  --t-slow:          400ms ease;
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Z-index ---------- */
  --z-base:          1;
  --z-dropdown:      100;
  --z-sticky:        200;
  --z-overlay:       300;
  --z-modal:         400;
  --z-toast:         500;

  /* ---------- Header ---------- */
  --header-h:        80px;
  --header-h-sm:     64px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast:        1ms;
    --t-base:        1ms;
    --t-slow:        1ms;
  }
}