/* ============================================================
   VIVA BIOMED — DESIGN TOKENS v3
   Palette restored to the logo's own gradient sweep — cyan-teal
   through to lime-green — sampled directly from the dot cluster.
   Variable NAMES kept identical to v2 so every shared component
   file (hero.css / components.css / layout.css) re-colors
   automatically without needing to be touched.
   Font system: Poppins.
   ============================================================ */

:root{
  /* ---- Brand core (sampled + extended from the logo dots) ---- */
  --violet:        #0B5E52;   /* deepest teal — primary CTAs, headings accent */
  --violet-700:    #083F37;
  --violet-100:    #E3F5F1;
  --cyan:          #3FA9A6;   /* cyan-teal dot */
  --cyan-100:      #DFF4F2;
  --pink:          #5FAF52;   /* mid-green dot (was pink slot in prior draft) */
  --pink-100:      #E9F6E1;
  --amber:         #9CC93E;   /* lime dot (was amber slot) */
  --amber-100:     #F3F9E1;
  --lime:          #4FAE6E;
  --lime-100:      #E4F5EA;

  /* ---- Category identity colors — a slice of the same brand sweep ---- */
  --cat-api:        var(--violet);
  --cat-api-soft:   var(--violet-100);
  --cat-excip:      var(--cyan);
  --cat-excip-soft: var(--cyan-100);
  --cat-cosmetic:   var(--pink);
  --cat-cosmetic-soft: var(--pink-100);
  --cat-personal:   var(--amber);
  --cat-personal-soft: var(--amber-100);

  /* ---- Neutrals ---- */
  --ink:            #112420;
  --ink-soft:       #4C635D;
  --paper:          #F8FBF9;
  --surface:        #FFFFFF;
  --surface-tint:   #EEF7F3;
  --line:           #DCEBE5;
  --line-strong:    #BFDCD2;

  /* ---- Gradients — following the logo's own cyan→teal→green→lime sweep ---- */
  --gradient-hero: linear-gradient(100deg, #3FA9A6 0%, #1C8C7A 34%, #5FAF52 68%, #9CC93E 100%);
  --gradient-violet: linear-gradient(135deg, #1C8C7A 0%, #0B5E52 100%);
  --gradient-cyan: linear-gradient(135deg, #5CC2C2 0%, #3FA9A6 100%);
  --gradient-pink: linear-gradient(135deg, #8BCB5B 0%, #5FAF52 100%);
  --gradient-amber: linear-gradient(135deg, #C8E06B 0%, #9CC93E 100%);
  --gradient-mesh: radial-gradient(at 15% 20%, rgba(63,169,166,0.14) 0px, transparent 55%), radial-gradient(at 85% 10%, rgba(95,175,82,0.12) 0px, transparent 50%), radial-gradient(at 75% 85%, rgba(11,94,82,0.12) 0px, transparent 50%), radial-gradient(at 10% 90%, rgba(156,201,62,0.14) 0px, transparent 50%);

  /* ---- Type: Poppins everywhere ---- */
  --font-display: 'Poppins', -apple-system, sans-serif;
  --font-body: 'Poppins', -apple-system, sans-serif;

  --fs-display-1: clamp(2.5rem, 4.4vw + 1rem, 4.6rem);
  --fs-display-2: clamp(2rem, 2.6vw + 1rem, 3rem);
  --fs-h2: clamp(1.5rem, 1.4vw + 1rem, 2.2rem);
  --fs-h3: clamp(1.1rem, 0.6vw + 1rem, 1.35rem);
  --fs-body-lg: 1.13rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  /* ---- Layout ---- */
  --maxw: 1260px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;
  --radius-pill: 100px;
  --shadow-card: 0 2px 8px rgba(11,94,82,0.06), 0 14px 34px rgba(11,94,82,0.08);
  --shadow-lift: 0 18px 44px rgba(11,94,82,0.20);
  --shadow-color-violet: 0 14px 34px rgba(11,94,82,0.30);
  --shadow-color-pink: 0 14px 34px rgba(95,175,82,0.30);
  --shadow-color-cyan: 0 14px 34px rgba(63,169,166,0.30);
  --shadow-color-amber: 0 14px 34px rgba(156,201,62,0.32);

  --ease: cubic-bezier(.22,.9,.32,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --speed-s: 200ms;
  --speed-m: 380ms;
  --speed-l: 680ms;
}