/* ============================================================
   VETos — Brand Pack tokens
   A product expression WITHIN the SupaHuman ecosystem.
   Load AFTER ../../colors_and_type.css — these build on it.
   ============================================================ */

:root {
  /* ---------- VETos navy field (deep, cool, electric) ---------- */
  --vetos-navy-900: #0A1230;   /* deepest — page floor */
  --vetos-navy-800: #0C1633;   /* base background (sampled from brand hero) */
  --vetos-navy-700: #12173C;   /* lifted corner / panel */
  --vetos-navy-600: #1A2348;   /* raised surface */
  --vetos-navy-500: #273357;   /* border / hairline on dark */
  --vetos-navy-400: #3A476B;   /* muted stroke */

  /* ---------- VETos signature gradient (the "os") ---------- */
  --vetos-blue:   #2E6BF2;     /* electric blue — gradient start */
  --vetos-indigo: #4A57FB;     /* indigo — gradient middle */
  --vetos-violet: #6B4DF8;     /* violet — gradient end */

  /* Primary brand gradient — used on the "os", accents, CTAs, key data */
  --vetos-gradient:        linear-gradient(100deg, var(--vetos-blue) 0%, var(--vetos-indigo) 52%, var(--vetos-violet) 100%); /* @kind color */
  --vetos-gradient-135:    linear-gradient(135deg, var(--vetos-blue) 0%, var(--vetos-indigo) 50%, var(--vetos-violet) 100%); /* @kind color */
  --vetos-gradient-soft:   linear-gradient(100deg, #3B72F3 0%, #5A5CFB 52%, #7B5EF9 100%); /* @kind color */

  /* Glow used behind the wordmark / hero focal point */
  --vetos-glow: radial-gradient(60% 120% at 38% 60%, rgba(74,87,251,0.45) 0%, rgba(46,107,242,0.18) 38%, transparent 70%); /* @kind color */

  /* ---------- Text on the navy field ---------- */
  --vetos-fg:        #FFFFFF;   /* primary text / "VET" */
  --vetos-fg-muted:  #A5A9B5;   /* eyebrows, captions (sampled) */
  --vetos-fg-dim:    #6E7593;   /* tertiary */

  /* ---------- Dot grid (brand texture) ---------- */
  --vetos-dot:       rgba(146, 160, 220, 0.10); /* @kind color */
  --vetos-dot-size:  38px; /* @kind spacing */

  /* ---------- Composite backgrounds ---------- */
  --vetos-bg:
    radial-gradient(1300px 560px at 82% -12%, #16193F 0%, transparent 58%),
    radial-gradient(900px 600px at 0% 110%, #11193C 0%, transparent 55%),
    linear-gradient(180deg, #0E1635 0%, #0A1230 100%); /* @kind color */

  /* Dot-grid layer — compose ON TOP of --vetos-bg via background stacking */
  --vetos-dotgrid:
    radial-gradient(var(--vetos-dot) 1.4px, transparent 1.4px); /* @kind color */

  /* Light-mode VETos surface (rare — for docs/printed collateral) */
  --vetos-light-bg: linear-gradient(180deg, #FFFFFF 0%, #F4F7FF 100%); /* @kind color */
  --vetos-light-fg: #0C1633;
}

/* ============================================================
   Helper classes
   ============================================================ */

/* The navy field with dot grid — drop on any full-bleed surface */
.vetos-field {
  background-color: #0B1430;
  background-image: var(--vetos-dotgrid), var(--vetos-bg);
  background-size: var(--vetos-dot-size) var(--vetos-dot-size), auto, auto, auto;
  color: var(--vetos-fg);
}

/* Gradient text (the "os" treatment, gradient headlines, key numbers) */
.vetos-gradient-text {
  background: var(--vetos-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Eyebrow — spaced caps, muted */
.vetos-eyebrow {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--vetos-fg-muted);
  font-size: 14px;
}

/* ============================================================
   THE WORDMARK
   "VET" in --vetos-fg, "os" in --vetos-gradient.
   Always set in Geomanist. Tracking is slightly tight.
   ============================================================ */
.vetos-wordmark {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 0.9;
  display: inline-flex;
  align-items: baseline;
  color: var(--vetos-fg);          /* "VET" */
  white-space: nowrap;
}
.vetos-wordmark .os {
  background: var(--vetos-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-transform: lowercase;
}
/* On light surfaces, "VET" flips to navy */
.vetos-wordmark.on-light { color: var(--vetos-light-fg); }