/* ============================================================
   ECOVETSERVICE — CSS Variables & Root Tokens  v2
   Pharmaceutical / Medical B2B — Light clean theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400&family=Syne:wght@400;500;600;700;800&family=DM+Mono:wght@300;400;500&display=swap');

:root {
  /* ── Brand Colors — clean pharma B2B ── */
  --color-navy:        #0D2137;
  --color-navy-mid:    #153049;
  --color-navy-light:  #1E4060;
  --color-teal:        #0A7A6A;
  --color-teal-mid:    #0C8F7C;
  --color-teal-light:  #11A891;
  --color-gold:        #C8972E;
  --color-gold-light:  #DBA83E;
  --color-gold-pale:   #F5E4BE;

  /* ── Neutrals — white/grey base ── */
  --color-white:       #FFFFFF;
  --color-off-white:   #F4F6F9;
  --color-grey-50:     #F9FAFB;
  --color-grey-100:    #EEF1F5;
  --color-grey-200:    #D8DFE9;
  --color-grey-300:    #B8C3D3;
  --color-grey-400:    #8496AA;
  --color-grey-600:    #4A5E72;
  --color-text:        #111827;
  --color-text-muted:  #4B5C6E;

  /* ── Semantic ── */
  --color-bg:          var(--color-white);
  --color-bg-alt:      var(--color-grey-50);
  --color-bg-panel:    var(--color-grey-100);
  --color-border:      var(--color-grey-200);
  --color-primary:     var(--color-navy);
  --color-accent:      var(--color-gold);
  --color-cta:         var(--color-teal);

  /* Hero specific — dark navy section remains for hero only */
  --hero-bg:           #0D2137;

  /* ── Typography — pharmaceutical clean ── */
  --font-display:      'Syne', system-ui, sans-serif;
  --font-body:         'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:         'DM Mono', 'Courier New', monospace;

  --fs-xs:     0.75rem;
  --fs-sm:     0.875rem;
  --fs-base:   1rem;
  --fs-md:     1.125rem;
  --fs-lg:     1.25rem;
  --fs-xl:     1.5rem;
  --fs-2xl:    1.875rem;
  --fs-3xl:    2.25rem;
  --fs-4xl:    3rem;
  --fs-5xl:    3.75rem;
  --fs-6xl:    4.5rem;
  --fs-7xl:    5.5rem;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-extrabold: 800;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;
  --lh-loose:   1.9;

  --ls-tight:   -0.03em;
  --ls-snug:    -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-wider:   0.08em;
  --ls-widest:  0.13em;

  /* ── Spacing ── */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-7:   1.75rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;
  --sp-32:  8rem;
  --sp-40:  10rem;

  /* ── Layout ── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
  --container-pad: clamp(1.25rem, 5vw, 3rem);

  /* ── Borders & Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;
  --border-thin: 1px solid var(--color-border);
  --border-mid:  2px solid var(--color-border);

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(13,33,55,.05), 0 1px 2px rgba(13,33,55,.04);
  --shadow-md:  0 4px 12px rgba(13,33,55,.07), 0 2px 4px rgba(13,33,55,.04);
  --shadow-lg:  0 10px 32px rgba(13,33,55,.10), 0 4px 8px rgba(13,33,55,.05);
  --shadow-xl:  0 20px 60px rgba(13,33,55,.13), 0 8px 16px rgba(13,33,55,.06);
  --shadow-gold: 0 4px 20px rgba(200,151,46,.22);
  --shadow-card: 0 2px 8px rgba(13,33,55,.06), 0 8px 32px rgba(13,33,55,.06);

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   150ms;
  --dur-mid:    280ms;
  --dur-slow:   450ms;
  --dur-slower: 700ms;

  /* ── Z-Index ── */
  --z-below:    -1;
  --z-base:      0;
  --z-above:    10;
  --z-overlay:  100;
  --z-modal:    200;
  --z-nav:      300;
  --z-top:      400;

  /* ── Header ── */
  --header-h:      72px;
  --header-h-mob:  60px;
}