/* ============================================================
   VECTA — Design Tokens
   Active direction: 02 "Lima" (Architectural · disruptive)
   Concept: connect strategy↔operations, vision↔people.
   Fixed: the new logo + its wordmark (never re-typed).
   Anchor: OFFICIAL VECTA green — Pantone 624C #688D7E.
   Base: architectural warm ink #161814 + bone #F3F1EA.
   Disruptive accent: electric lime #C7F032 (NO blue/navy).
   Type: Sora (geometric display) + Manrope (text)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- Brand anchor: OFFICIAL VECTA green (Pantone 624C, RGB 104/141/126) ---- */
  --sage:  #688D7E;   /* official VECTA green — Pantone 624C */

  /* ---- Architectural ink (warm near-black, NOT navy) ---- */
  --ink-900: #0E0F0C;
  --ink-800: #161814;  /* primary ink / text */
  --ink-700: #25281F;
  --ink-600: #3A3D33;
  --ink-500: #565A4D;

  /* ---- VECTA green scale (built from Pantone 624C #688D7E) ---- */
  --sage-800: #3D564C;
  --sage-700: #4C685D;  /* text-on-light accent */
  --sage-600: #5A7B6E;  /* hover */
  --sage-500: #688D7E;  /* = --sage, principal ★ */
  --sage-400: #8AA89C;
  --sage-300: #AFC3BA;
  --sage-200: #D0DCD6;
  --sage-100: #E8EEEB;  /* soft tint */

  /* ---- Forest (official secondary deep green) = lima↔green bridge ---- */
  --forest: #304E48;

  /* ---- DISRUPTIVE accent: acid lime (NO blue anywhere) ---- */
  --acid-700: #8FB400;
  --acid-600: #A9D11A;
  --acid-500: #C7F032;  /* electric lime — the "break" color */
  --acid-300: #E0F88A;
  --acid-100: #F3FCD2;

  /* ---- Alternate disruptive accent: hot coral (direction C) ---- */
  --coral-600: #E8462A;
  --coral-500: #FF5A3C;
  --coral-100: #FFE5DE;

  /* ---- Warm bone neutrals (architectural paper) ---- */
  --bone:     #F3F1EA;  /* page background */
  --bone-2:   #ECE9DF;  /* alt section / sand line */
  --surface:  #FBFAF6;  /* cards (slightly lifted off bone) */
  --line:     #DED9CC;  /* hairline borders */
  --line-strong: #C9C2B1;
  --stone-400:#9A9587;  /* muted text */
  --stone-600:#6A6557;  /* secondary text */

  /* ---- Semantic ---- */
  --bg:        var(--bone);
  --bg-alt:    var(--bone-2);
  --bg-invert: var(--ink-800);
  --fg:        var(--ink-800);
  --fg-2:      var(--stone-600);
  --fg-muted:  var(--stone-400);
  --fg-invert: #F1EFE8;
  --fg-invert-2:#A8B0A0;
  --primary:   var(--sage-500);
  --primary-ink:#11211C;          /* dark ink text on green (architectural) */
  --primary-hover: var(--sage-600);
  --accent:    var(--acid-500);   /* disruptive electric lime */
  --accent-ink:#1A2200;           /* text on acid */

  /* Branded semantics — derived from palette, NOT classic bootstrap */
  --positive: #4F9163;            /* deep sage */
  --signal:   var(--acid-500);    /* acid lime highlight */
  --alert:    var(--coral-500);   /* hot coral */
  --neutral:  var(--ink-800);     /* ink (replaces classic blue 'info') */

  /* ---- Typography ---- */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;

  /* Type ramp (desktop) */
  --t-display:  clamp(3rem, 7vw, 5.5rem);   /* hero — architectural */
  --t-h1:       clamp(2.3rem, 4.4vw, 3.6rem);
  --t-h2:       clamp(1.8rem, 3vw, 2.6rem);
  --t-h3:       1.5rem;
  --t-h4:       1.2rem;
  --t-lead:     1.3rem;
  --t-body:     1.0625rem;
  --t-small:    0.9375rem;
  --t-eyebrow:  0.8125rem;

  --lh-tight:   1.02;
  --lh-snug:    1.18;
  --lh-body:    1.62;

  --tracking-eyebrow: 0.24em;   /* wide, architectural labels */
  --tracking-display: -0.03em;  /* tight display */
  --tracking-tight:  -0.02em;

  /* ---- Spacing (8px base) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px; --sp-11: 160px;

  /* ---- Radii — restrained, architectural (sharper than before) ---- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ---- Shadows (warm ink-tinted, very soft) ---- */
  --shadow-sm: 0 1px 2px rgba(22,24,20,.05), 0 2px 8px rgba(22,24,20,.05);
  --shadow-md: 0 6px 16px rgba(22,24,20,.07), 0 14px 36px rgba(22,24,20,.07);
  --shadow-lg: 0 16px 48px rgba(22,24,20,.14);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  300ms;

  --maxw: 1240px;
}

/* ============================================================
   Semantic element styles
   ============================================================ */
.vecta-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-800);
}
.vecta-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
}
h1, .vecta-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
}
h2, .vecta-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
h3, .vecta-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  color: var(--fg);
}
.vecta-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
body, p, .vecta-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.vecta-small {
  font-size: var(--t-small);
  color: var(--fg-muted);
}