/* ═══════════════════════════════════════════════════════
   ZOOVIT — Design Tokens (single source of truth)
   Every colour, font, shadow, spacing defined once here.
═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,700;0,9..144,800;1,9..144,400;1,9..144,700&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* Brand palette */
  --navy:        #0c3360;
  --blue:        #1761b0;
  --blue-mid:    #2175cc;
  --sky:         #4aa3e8;
  --sky-light:   #bfe0f7;
  --pale:        #e6f2fc;
  --amber:       #f5a523;
  --amber-dark:  #d4880a;
  --amber-light: #fef3d8;

  /* Neutrals */
  --white:       #ffffff;
  --off-white:   #f8fbff;
  --gray-bg:     #f2f7fc;
  --gray-text:   #56687a;
  --gray-mid:    #8a9fb5;
  --gray-soft:   #dce9f4;
  --dark:        #091c30;

  /* Footer */
  --footer-bg:     #060e1a;
  --footer-border: rgba(255,255,255,0.08);
  --footer-text:   rgba(255,255,255,0.58);
  --footer-muted:  rgba(255,255,255,0.28);

  /* Typography */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;

  /* Fluid font sizes */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   clamp(16px,1.6vw,19px);
  --text-xl:   clamp(22px,2.8vw,32px);
  --text-2xl:  clamp(28px,4vw,44px);
  --text-3xl:  clamp(34px,5.5vw,60px);
  --text-hero: clamp(38px,6.5vw,76px);

  /* Radii */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  30px;
  --r-2xl: 40px;

  /* Shadows */
  --shadow-xs: 0 2px 8px rgba(12,51,96,0.06);
  --shadow-sm: 0 4px 18px rgba(12,51,96,0.09);
  --shadow-md: 0 10px 36px rgba(12,51,96,0.13);
  --shadow-lg: 0 22px 60px rgba(12,51,96,0.18);
  --shadow-xl: 0 40px 90px rgba(12,51,96,0.22);

  /* Transitions */
  --ease:       cubic-bezier(0.22,0.9,0.36,1);
  --trans-fast: all 0.18s var(--ease);
  --trans:      all 0.28s var(--ease);

  /* Layout */
  --max-w:      1200px;
  --section-px: clamp(18px,5vw,80px);
  --section-py: clamp(52px,8vw,100px);
  --nav-h:      70px;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; }
body { font-family:var(--font-body); background:var(--white); color:var(--dark); overflow-x:hidden; line-height:1.6; -webkit-font-smoothing:antialiased; padding-top:var(--nav-h); }
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
input, textarea, select { font-family:inherit; }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--sky-light); border-radius:3px; }