/* ============================================================================
   VEINTRAIN DESIGN TOKENS — single machine-checkable source of truth
   ----------------------------------------------------------------------------
   Version:      1.1  (2026-10-01)
   Extracted from: VEINTRAIN_DESIGN_SYSTEM.html :root (commit 771cf41, 2026-07-10)
   Governs:      VEINTRAIN_DESIGN_SYSTEM.html (canonical written standard)
   Status:       CANONICAL for settled tokens. Values flagged UNCONFIRMED /
                 RESTRICTED / OPEN below are NOT settled — do not treat as free
                 to use without the noted approval.

   RULE OF ONE:  This is the ONLY place brand token *values* are defined.
                 Every dashboard, template and branded HTML output must
                 reference these variables (link this file, or copy this
                 :root block verbatim and keep it in sync — never fork values).
                 Hard-coding a raw hex that duplicates or contradicts a token
                 below is a brand-check failure (see brand-compliance-check.sh).

   AD HOC ARTEFACT RULE (Sarah, 2026-10-01): quick PDFs, partner guides,
   draft collateral and generated documents MUST read this source before
   creation. Use Figtree, charcoal #2A2C2C and only the approved blues
   #37AEEF, #2B4D79 and #396CAF. Red #861315 is accent-only, never the
   default. Do not use gradients or invent colours. Apply the VeinTrain visual
   system rather than generic document styling.
   ============================================================================ */

:root {

  /* ── CHARCOAL SCALE — primary dark architecture ─────────────────────────
     Dominant. All dark panels, hero/stats sections, HALO cards, dark zones.
     NOT replaceable with blue. Defining brand assets. Never pure black. */
  --vt-charcoal-900: #2a2c2c;   /* APPROVED — default text/headings and dark architecture */
  --vt-charcoal-800: #2d2e35;   /* SAMPLED — HALO level cards, inner dark cards*/
  --vt-charcoal-700: #383a3f;   /* SAMPLED — swoosh graphite, dark dividers    */
  --vt-charcoal-500: #5a5c62;   /* DERIVED — mid-grey / secondary in dark zones*/
  --vt-charcoal-300: #9a9ca2;   /* DERIVED — muted label text                  */
  --vt-charcoal-100: #e8e9eb;   /* DERIVED — dividers/borders in light sections*/
  --vt-charcoal-50:  #f4f5f6;   /* DERIVED — pale section background            */

  /* ── ACCENT RED ─────────────────────────────────────────────────────────
     Accent-only. Never the default for headings, body text, panels or CTAs. */
  --vt-red:          #861315;   /* APPROVED — accent-only                        */
  --vt-red-light:    var(--vt-red); /* compatibility alias, no invented tint     */
  --vt-red-pale:     var(--vt-white); /* compatibility alias, no invented tint   */

  /* ── APPROVED BLUE FAMILY ───────────────────────────────────────────────
     The complete approved blue set for branded artefacts. No gradients. */
  --vt-blue:         #37aeef;   /* bright/action blue                            */
  --vt-blue-deep:    #2b4d79;   /* deep structural blue                          */
  --vt-blue-mid:     #396caf;   /* mid structural blue                           */
  --vt-blue-light:   var(--vt-white); /* compatibility alias, no invented tint  */
  --halo-neon:       var(--vt-blue); /* legacy alias, not a separate colour      */
  --halo-glow:       var(--vt-blue); /* legacy alias, gradients/glows prohibited */

  /* ── CONTENT BASE ───────────────────────────────────────────────────────
     White and light greys: content cards, page backgrounds, navigation. */
  --vt-white:        #ffffff;
  --vt-grey-50:      #f7f8fa;
  --vt-grey-100:     #f0f2f5;
  --vt-grey-200:     #d9dde4;
  --vt-grey-400:     #9ca3af;
  --vt-grey-600:     #4b5563;
  --vt-grey-800:     #1f2937;
  --vt-text:         #2a2c2c;

  /* ── OUTWARD-FACING / PARTNER MASTHEAD BLUE ─────────────────────────────
     Deeper blue permitted for partner & internal-operational mastheads
     (the "blue Mission Control family", VEINTRAIN_DESIGN_SYSTEM.html
     Operational Dashboard Standard). Use for topbar/masthead gradients ONLY;
     content stays on the light base above. */
  --vt-masthead-2:   #396caf;   /* approved supporting masthead blue            */
  --vt-blue-deep-2:  #396caf;   /* approved mid blue                            */
  /* Mastheads use a single approved solid blue. Gradients are not permitted. */

  /* ── STATUS PALETTE (operational dashboards) ────────────────────────────
     Non-colour cue must accompany (icon/label) — never colour alone. */
  --vt-status-green:  #1e7d43;
  --vt-status-blue:   #37aeef;
  --vt-status-amber:  #b26a00;
  --vt-status-red:    #861315;  /* alert / Sarah-required                       */
  --vt-status-grey:   #6b7280;
  --vt-status-purple: #6d4fa1;
  --vt-ontrack:       #4a8a63;  /* muted green — "on track" momentum            */

  /* ── BACKWARDS COMPAT ───────────────────────────────────────────────────
     --vt-blue-dark was previously a cold blue-black (#0f2f4a) — WRONG.
     Mapped to charcoal-900 so old references don't break during migration. */
  --vt-blue-dark:    var(--vt-charcoal-900);

  /* ── RESTRICTED ─────────────────────────────────────────────────────────
     Edna Adan / Somaliland centre identity ONLY. Not for general use. */
  --edna-pink:       #e91e8c;   /* UNCONFIRMED — restricted use                 */

  /* ── TYPOGRAPHY ─────────────────────────────────────────────────────────
     Primary font Figtree (loaded via Google Fonts). Noto Sans for extended
     glyph coverage, then system fallback. Do NOT introduce Inter / Montserrat
     / any other family — resolved from live-site + design-system evidence. */
  --font-main:   'Figtree', 'Noto Sans', system-ui, -apple-system,
                 BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --fw-body:     400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-heavy:    800;   /* hero / H1 / H2                                       */
  --lh-body:     1.6;
  --lh-tight:    1.2;   /* headings                                             */
  /* Minimum readable body size 13px (dense dashboards) / 15–16px (public).     */

  /* ── RADIUS ─────────────────────────────────────────────────────────────*/
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;

  /* ── SHADOWS ────────────────────────────────────────────────────────────
     Restrained. No heavy/glossy stacks. */
  --shadow-sm:   0 2px 8px rgba(0,0,0,.10);
  --shadow-md:   0 3px 10px rgba(0,0,0,.14);
  --shadow-lg:   0 6px 22px rgba(0,0,0,.16);

  /* ── LAYOUT ─────────────────────────────────────────────────────────────*/
  --container-max: 1280px;  /* single max-width container 1180–1280px           */
  --card-min:      240px;   /* auto-fill grids minmax ≈235–255px                */
  --space-1: 6px; --space-2: 10px; --space-3: 14px;
  --space-4: 18px; --space-5: 24px; --space-6: 36px;
  --bp-mobile:  640px;      /* masthead collapses to stack under this           */
  --bp-tablet:  900px;

  /* ── SWOOSH WATERMARK ───────────────────────────────────────────────────
     Asset: veintrain-swoosh-grey-halo.svg. Graphite/charcoal ONLY; never
     recoloured blue, never given neon/glow; watermark behind text. */
  --swoosh-opacity: 0.5;

  /* ── FOCUS STATE (accessibility) ────────────────────────────────────────*/
  --focus-ring: 3px solid #37aeef;   /* visible keyboard focus                  */
  --focus-offset: 2px;
}

/* ── COMPONENT DEFAULTS (settled) ─────────────────────────────────────────
   Minimal shared component styling. Reference these rather than reinventing
   per-file (`.btn`, `.card`, focus) — a one-off equivalent is a check failure. */

.vt-btn {
  font-family: var(--font-main);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-sm);
  border: 0;
  cursor: pointer;
  padding: 10px 18px;
  line-height: 1.2;
}
.vt-btn--primary { background: var(--vt-blue-deep); color: #fff; } /* primary action */
.vt-btn--action  { background: var(--vt-blue); color: #fff; }   /* Read more / Order / Discuss */
.vt-btn--primary:hover { background: var(--vt-blue-mid); }
.vt-btn--action:hover  { background: var(--vt-blue-mid); }

.vt-card {
  background: var(--vt-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-4);
}

:where(a, button, [tabindex], input, select, textarea):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Branded artefacts must not introduce raw palette values beyond the approved
   tokens above. Pure black is not a VeinTrain text colour. Red remains
   available only for a deliberate, limited accent. */