/* =========================================================================
   VANTA OMEGA — colors_and_type.css
   Single source of truth for color + type tokens.

   Vanta Omega is the holding company behind sendvo, cernvo, and the VO
   companies to come. Its job is to be the FIELD that holds each child's
   light — so the parent brand is near-black and monochrome, interrupted by
   exactly one decisive accent of its own (Arc — electric ultramarine),
   distinct from sendvo's Volt orange and cernvo's signal green.

   Family DNA honoured here:
     · monochrome field + ONE rationed accent
     · a sans for words, a mono for numbers / labels / identifiers
     · sharp geometry, flat surfaces, hairline borders, no decorative gradients

   Distinct from the children:
     · deepest, most neutral black of the family ("Vanta")
     · CAPS, tracked institutional wordmark (children are lowercase products)
     · Space Grotesk + Space Mono (neither Inter nor Geist)
   ========================================================================= */

/* ---------- Webfonts -------------------------------------------------------
   Space Grotesk (sans) + Space Mono (mono), loaded from Google Fonts.
   Freely licensed (SIL OFL). Flagged for self-hosting in README §Caveats —
   drop .woff2 files in fonts/ and swap these @imports for @font-face.
--------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  /* ===== COLOR — The Void (base field) ===================================
     Deepest, most neutral black of the VO family. The parent is the space
     the children live in; it sits a step darker and cooler-neutral than
     cernvo's charcoal so parent never reads as a product.
     ====================================================================== */
  --vo-void:        #08090B;   /* page canvas — "Vanta" */
  --vo-obsidian:    #0D0F12;   /* elev-1 · sections, rails */
  --vo-graphite:    #14171B;   /* elev-2 · cards, panels */
  --vo-slate:       #1C2026;   /* elev-3 · hover, popovers */
  --vo-inkwell:     #050507;   /* inset · wells, terminals */

  /* Borders / hairlines */
  --vo-line:        #23272F;   /* default border · 1px */
  --vo-line-strong: #323843;   /* hover / focus / the one row that matters */
  --vo-line-faint:  #17191E;   /* whisper dividers */

  /* Foreground (text) */
  --vo-platinum:    #F4F5F7;   /* fg-1 · headlines, primary */
  --vo-silver:      #B4B9C2;   /* fg-2 · body */
  --vo-ash:         #7E848E;   /* fg-3 · captions, metadata */
  --vo-pewter:      #4C515B;   /* fg-4 · disabled, placeholder, faint marks */
  --vo-fg-on-arc:   #FFFFFF;   /* text on top of Arc */

  /* ===== COLOR — Arc (the one decisive accent) ===========================
     Electric ultramarine. The parent's signature, distinct from Volt orange
     (sendvo) and signal green (cernvo). Marks the connective "vo", the
     omega, active states, and the single primary action. Earn the Arc:
     roughly one Arc moment per view.
     ====================================================================== */
  --vo-arc:         #4B5BFF;
  --vo-arc-hover:   #6373FF;
  --vo-arc-press:   #3A49E6;
  --vo-arc-fade:    rgba(75, 91, 255, 0.12);   /* tinted fills */
  --vo-arc-line:    rgba(75, 91, 255, 0.40);   /* tinted borders */
  --vo-arc-glow:    rgba(75, 91, 255, 0.22);   /* the single permitted wash */

  /* ===== COLOR — The children (used ONLY to represent the portfolio) =====
     Vanta Omega stays monochrome + Arc. These hues appear exclusively where
     a child company is named or represented — never as parent chrome.
     ====================================================================== */
  --vo-sendvo:      #FF5722;   /* sendvo · Volt orange */
  --vo-cernvo:      #3DDC97;   /* cernvo · signal green */
  --vo-primevo:     #F32A75;   /* primevo · Pulse rose-magenta */
  --vo-coming:      var(--vo-pewter);   /* unannounced / pre-launch VO companies */

  /* ===== COLOR — Semantic (restrained, data only) ======================== */
  --vo-positive:    #3DDC97;
  --vo-negative:    #FF6B6B;
  --vo-warning:     #F5B544;
  --vo-info:        #6FA8FF;

  /* ===== TYPE — Families =================================================
     Space Grotesk for everything that is words; Space Mono for everything
     that is a number, a label, an identifier, an index, or the "·vo" mark.
     ====================================================================== */
  --vo-font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --vo-font-sans:    "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --vo-font-mono:    "Space Mono", ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* ===== TYPE — Scale (px) ===============================================
     Display leans monumental for the institutional wordmark + the one
     declarative statement. Body is sparse — this is a holding page.
     ====================================================================== */
  --vo-text-xs:    12px;   /* mono micro · eyebrows, indices */
  --vo-text-sm:    13px;   /* small · captions, footer */
  --vo-text-base:  15px;   /* body */
  --vo-text-md:    17px;   /* lede / sub-copy */
  --vo-text-lg:    20px;
  --vo-text-xl:    26px;
  --vo-text-2xl:   34px;
  --vo-text-3xl:   46px;
  --vo-text-4xl:   64px;
  --vo-text-5xl:   88px;
  --vo-text-6xl:  128px;   /* the declaration · page-level only */

  /* Line heights */
  --vo-lh-solid:   0.96;   /* monumental display */
  --vo-lh-tight:   1.05;
  --vo-lh-snug:    1.2;
  --vo-lh-normal:  1.5;
  --vo-lh-relaxed: 1.62;

  /* Letter spacing */
  --vo-track-mega:    -0.04em;   /* the declaration */
  --vo-track-display: -0.025em;  /* headings */
  --vo-track-tight:   -0.01em;
  --vo-track-normal:   0;
  --vo-track-wide:     0.04em;   /* tracked caps wordmark */
  --vo-track-mono:     0.02em;
  --vo-track-eyebrow:  0.22em;   /* mono uppercase eyebrows — wider than children, more institutional */

  /* Weights (Space Grotesk: 300–700) */
  --vo-fw-light:    300;
  --vo-fw-regular:  400;
  --vo-fw-medium:   500;
  --vo-fw-semibold: 600;
  --vo-fw-bold:     700;

  /* ===== SPACING (4px base) ============================================== */
  --vo-space-1:   4px;
  --vo-space-2:   8px;
  --vo-space-3:   12px;
  --vo-space-4:   16px;
  --vo-space-5:   20px;
  --vo-space-6:   24px;
  --vo-space-8:   32px;
  --vo-space-10:  40px;
  --vo-space-12:  48px;
  --vo-space-16:  64px;
  --vo-space-20:  80px;
  --vo-space-24:  96px;
  --vo-space-32: 128px;
  --vo-space-40: 160px;

  /* ===== RADII — sharp. The parent is the sharpest of the family. ======== */
  --vo-radius-0:    0px;      /* hard edge · tables, the index, terminals */
  --vo-radius-1:    2px;      /* chips, mono badges */
  --vo-radius-2:    4px;      /* buttons, inputs */
  --vo-radius-3:    8px;      /* cards */
  --vo-radius-4:    12px;     /* large panels (max) */
  --vo-radius-pill: 999px;    /* status dots / rare badge only */

  /* ===== SHADOWS / ELEVATION ============================================
     On the void, elevation is hairline + a 1px inset top-highlight + a
     sliver of deeper black. No soft floaty glows (the one Arc glow excepted).
     ====================================================================== */
  --vo-shadow-1: 0 1px 0 rgba(255,255,255,0.02) inset, 0 1px 2px rgba(0,0,0,0.5);
  --vo-shadow-2: 0 1px 0 rgba(255,255,255,0.03) inset, 0 6px 20px rgba(0,0,0,0.55);
  --vo-shadow-3: 0 1px 0 rgba(255,255,255,0.04) inset, 0 18px 44px rgba(0,0,0,0.62);

  /* Focus ring — Arc at low alpha, never the system blue */
  --vo-ring: 0 0 0 2px var(--vo-void), 0 0 0 4px rgba(75, 91, 255, 0.65);

  /* ===== MOTION =========================================================
     Decisive, no overshoot. Matches the family's fast-and-flat feel.
     ====================================================================== */
  --vo-ease:          cubic-bezier(0.2, 0, 0, 1);
  --vo-ease-emphasis: cubic-bezier(0.3, 0.7, 0.1, 1);
  --vo-dur-1: 90ms;    /* micro · hover */
  --vo-dur-2: 180ms;   /* default · state changes */
  --vo-dur-3: 280ms;   /* layout */
  --vo-dur-4: 480ms;   /* page-level reveals */

  /* ===== LAYOUT ========================================================= */
  --vo-max-prose:   620px;
  --vo-max-content: 1120px;
  --vo-max-wide:    1320px;
  --vo-gutter:      32px;
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES
   Scope a document with class="vo-doc" (or apply classes directly).
   ========================================================================= */
.vo-doc {
  background: var(--vo-void);
  color: var(--vo-silver);
  font-family: var(--vo-font-sans);
  font-size: var(--vo-text-base);
  line-height: var(--vo-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The declaration — page-level only, one per page. */
.vo-mega {
  font-family: var(--vo-font-display);
  font-weight: var(--vo-fw-medium);
  font-size: clamp(48px, 9vw, var(--vo-text-6xl));
  line-height: var(--vo-lh-solid);
  letter-spacing: var(--vo-track-mega);
  color: var(--vo-platinum);
  text-wrap: balance;
}
.vo-h1 {
  font-family: var(--vo-font-display);
  font-weight: var(--vo-fw-medium);
  font-size: clamp(36px, 5vw, var(--vo-text-4xl));
  line-height: var(--vo-lh-tight);
  letter-spacing: var(--vo-track-display);
  color: var(--vo-platinum);
  text-wrap: balance;
}
.vo-h2 {
  font-family: var(--vo-font-display);
  font-weight: var(--vo-fw-medium);
  font-size: clamp(28px, 3.4vw, var(--vo-text-3xl));
  line-height: var(--vo-lh-snug);
  letter-spacing: var(--vo-track-display);
  color: var(--vo-platinum);
  text-wrap: balance;
}
.vo-h3 {
  font-family: var(--vo-font-display);
  font-weight: var(--vo-fw-medium);
  font-size: var(--vo-text-xl);
  line-height: var(--vo-lh-snug);
  letter-spacing: var(--vo-track-tight);
  color: var(--vo-platinum);
}

/* Eyebrows / section labels — mono, uppercase, very wide tracking. */
.vo-eyebrow {
  font-family: var(--vo-font-mono);
  font-size: var(--vo-text-xs);
  font-weight: var(--vo-fw-regular);
  letter-spacing: var(--vo-track-eyebrow);
  text-transform: uppercase;
  color: var(--vo-ash);
}

/* Body */
.vo-p {
  font-family: var(--vo-font-sans);
  font-size: var(--vo-text-base);
  line-height: var(--vo-lh-relaxed);
  color: var(--vo-silver);
  text-wrap: pretty;
  max-width: var(--vo-max-prose);
}
.vo-lede {
  font-family: var(--vo-font-sans);
  font-size: var(--vo-text-md);
  line-height: var(--vo-lh-normal);
  font-weight: var(--vo-fw-regular);
  color: var(--vo-silver);
  text-wrap: pretty;
  max-width: var(--vo-max-prose);
}

/* Mono — labels, identifiers, indices, the connective "·vo" mark, data. */
.vo-mono {
  font-family: var(--vo-font-mono);
  font-size: var(--vo-text-sm);
  letter-spacing: var(--vo-track-mono);
  color: var(--vo-silver);
  font-variant-numeric: tabular-nums;
}
.vo-num {
  font-family: var(--vo-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--vo-track-mono);
  color: var(--vo-platinum);
}

/* The institutional wordmark — tracked caps. Children are lowercase; the
   parent is uppercase by deliberate hierarchy. */
.vo-wordmark {
  font-family: var(--vo-font-display);
  font-weight: var(--vo-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--vo-track-wide);
  color: var(--vo-platinum);
}

/* The "·vo" connective mark — the suffix every portfolio company shares.
   Set in mono; the "vo" carries Arc to signal "this belongs to Vanta Omega". */
.vo-suffix { color: var(--vo-arc); }

/* Links */
.vo-a {
  color: var(--vo-platinum);
  text-decoration: none;
  border-bottom: 1px solid var(--vo-line-strong);
  transition: border-color var(--vo-dur-2) var(--vo-ease), color var(--vo-dur-2) var(--vo-ease);
}
.vo-a:hover { border-color: var(--vo-arc); color: var(--vo-platinum); }

/* Focus + selection */
.vo-doc :focus-visible {
  outline: none;
  box-shadow: var(--vo-ring);
  border-radius: var(--vo-radius-2);
}
.vo-doc ::selection {
  background: var(--vo-arc);
  color: var(--vo-fg-on-arc);
}