/* ============================================================
   VECTOR SCIENCE & THERAPEUTICS — Design Tokens
   Official Brand: Blue #4f8abe · Orange #e05e57 · Green #458075
   Accent/Highlight: Green #458075 (replaces orange as UI accent)
   Typography: Avenir (web fallback: Nunito)
   ============================================================ */

/* Load Nunito as the web-safe Avenir approximation.
   If Avenir is installed on the user's machine it takes
   precedence via the font-family stack below. */
/* Nunito is loaded from each page's <head> (preconnect + <link>) so it is not a
   render-blocking @import chain behind main.css. */

:root {
  /* ── Brand Core ─────────────────────────────────── */
  --brand-blue:   #4f8abe;
  --brand-orange: #458075;  /* remapped: green is now the UI accent */
  --brand-green:  #458075;

  /* ── Blue Scale (built from #4f8abe / hsl 207 43% 53%) ── */
  --blue-950:  #07131f;
  --blue-900:  #0d2035;
  --blue-800:  #142d4d;
  --blue-700:  #1d3f6a;
  --blue-600:  #2c5a8c;
  --blue-500:  #4f8abe;   /* ← brand blue */
  --blue-400:  #74a5cc;
  --blue-300:  #99c0db;
  --blue-200:  #b8d4e8;
  --blue-100:  #d9eaf4;
  --blue-50:   #eef5fb;

  /* ── Orange Scale (built from #e05e57 / hsl 3 70% 61%) ── */
  --orange-800: #7a1f1a;
  --orange-700: #a33028;
  --orange-600: #c24640;
  --orange-500: #e05e57;   /* ← brand orange */
  --orange-400: #e88178;
  --orange-300: #f0a49f;
  --orange-200: #f6c5c2;
  --orange-100: #fde8e7;

  /* ── Green Scale (built from #458075 / hsl 170 30% 39%) ── */
  --green-800: #1b3733;
  --green-700: #2b5049;
  --green-600: #376459;
  --green-500: #458075;   /* ← brand green */
  --green-400: #6aa09a;
  --green-300: #93bcb7;
  --green-200: #b7d4d1;
  --green-100: #deeeed;

  /* ── Neutral Gray Scale ─────────────────────────── */
  --gray-900:  #1a2330;
  --gray-700:  #3a4758;
  --gray-500:  #637080;
  --gray-400:  #8a98a8;
  --gray-300:  #adb8c3;
  --gray-200:  #cdd4da;
  --gray-100:  #e5e9ec;
  --gray-50:   #f4f6f8;
  --white:     #ffffff;
  --black:     #070c12;

  /* ── Backward-Compatible Aliases (navy → blue, gold → orange) ── */
  /* These let existing main.css token references keep working     */
  --navy-950:  var(--blue-950);
  --navy-900:  var(--blue-900);
  --navy-800:  var(--blue-800);
  --navy-700:  var(--blue-700);
  --navy-600:  var(--blue-600);
  --navy-400:  var(--blue-400);
  --navy-300:  var(--blue-300);
  --navy-200:  var(--blue-200);
  --navy-100:  var(--blue-100);

  --gold-600:  var(--green-600);
  --gold-500:  var(--brand-green);
  --gold-400:  var(--green-400);
  --gold-300:  var(--green-300);
  --gold-200:  var(--green-200);
  --gold-100:  var(--green-100);

  --slate-700: var(--gray-700);
  --slate-500: var(--gray-500);
  --slate-400: var(--gray-400);
  --slate-300: var(--gray-300);
  --slate-200: var(--gray-200);
  --slate-100: var(--gray-100);

  --cream:      var(--gray-50);
  --cream-dark: var(--gray-100);

  /* ── Semantic Aliases ──────────────────────────── */
  --color-bg:           var(--white);
  --color-bg-alt:       var(--gray-50);
  --color-bg-dark:      var(--blue-900);
  --color-surface:      var(--white);
  --color-surface-dark: var(--blue-800);
  --color-primary:      var(--brand-blue);
  --color-primary-dark: var(--blue-700);
  --color-accent:       var(--brand-green);
  --color-accent-light: var(--green-100);
  --color-alt:          var(--brand-green);
  --color-text:         var(--blue-950);
  --color-text-muted:   var(--gray-500);
  --color-text-light:   var(--white);
  --color-border:       var(--gray-100);
  --color-border-dark:  rgba(255,255,255,0.12);

  /* ── Typography (Avenir first, Nunito as web fallback) ── */
  /* Avenir weights: Light=300, Roman=400, Heavy=800         */
  --font-display: 'Avenir', 'Avenir Next', 'Nunito', 'Century Gothic', sans-serif;
  --font-body:    'Avenir', 'Avenir Next', 'Nunito', 'Century Gothic', sans-serif;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  3.75rem;   /* 60px */
  --text-7xl:  4.5rem;    /* 72px */

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

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

  /* ── Layout ────────────────────────────────────── */
  --max-width:      1200px;
  --max-width-wide: 1400px;
  --nav-height:     80px;

  /* ── Borders & Radii ───────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Shadows (brand-blue based) ────────────────── */
  --shadow-sm:     0 1px 3px rgba(13,32,53,0.08), 0 1px 2px rgba(13,32,53,0.05);
  --shadow-md:     0 4px 16px rgba(13,32,53,0.10), 0 2px 6px rgba(13,32,53,0.07);
  --shadow-lg:     0 12px 40px rgba(13,32,53,0.14), 0 4px 12px rgba(13,32,53,0.09);
  --shadow-xl:     0 24px 64px rgba(13,32,53,0.18), 0 8px 24px rgba(13,32,53,0.11);
  --shadow-orange: 0 0 40px rgba(69,128,117,0.25);
  --shadow-blue:   0 0 40px rgba(79,138,190,0.25);

  /* ── Transitions ───────────────────────────────── */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);

  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;
}