/* ═══════════════════════════════════════════════════════════════════════
   TRINOVATA — CANONICAL BRAND TOKENS
   ───────────────────────────────────────────────────────────────────────
   VENDORED COPY. Do not hand-edit. Source of truth is the brand package:

     Products/Trinovata-Brand/tokens/colors.css
     Products/Trinovata-Brand/tokens/typography.css
     Products/Trinovata-Brand/tokens/spacing.css
     Products/Trinovata-Brand/tokens/shape.css

   Package version 1.0 (August 2026), owner Gregg Mannette.
   Vendored 2026-08-20. A static site on Vercel cannot @import across repo
   boundaries, so the tokens are copied rather than referenced. When the
   package changes, re-copy — do not patch this file in place.

   ONE DELIBERATE DIVERGENCE from the source: typography.css opens with an
   @import of the Google Fonts stylesheet. That is stripped here. An @import
   inside a stylesheet is discovered only after this file has been fetched
   and parsed, which serialises two round trips before any text can paint.
   The same fonts are requested from a <link rel="preconnect"> + <link
   rel="stylesheet"> in each page's <head> instead, so they start
   downloading in parallel with the CSS.

   The site is dark-ground. The package's light-surface semantics
   (--text-primary, --border-strong and friends) are therefore re-pointed
   at their --dark-* counterparts in styles.css. The light values below are
   left intact because the OG-card and PDF renderers author on paper.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────── tokens/colors.css ───────── */
:root {
  /* ---- PRIMARY · Ink (neutral black ramp) ---- */
  --ink-50:  #F5F5F6;
  --ink-200: #D6D6D9;
  --ink-400: #8E8E95;
  --ink-600: #4E4E55;
  --ink-800: #26262C;
  --ink-900: #0A0A0C; /* core — the site's own theme-color */
  --ink-950: #0A0A0C;
  --ink-700: #1C1C21;
  --ink-500: #35353D;

  /* ---- SECONDARY · Graphite (warm grey ramp) ---- */
  --graphite-50:  #F7F5F0;
  --graphite-200: #E4E1DA;
  --graphite-400: #C9C5BC;
  --graphite-600: #9C978D;
  --graphite-800: #6F6B63; /* core */
  --graphite-950: #34322D;

  /* ---- ACCENT · Gold. 400/500/600 are the mark's three faces, sampled. ---- */
  --gold-50:  #F7F3EA;
  --gold-100: #EFE9DD;
  --gold-200: #E5DBC6;
  --gold-300: #C9B99A;
  --gold-400: #C9B99A; /* light face */
  --gold-500: #B5A688; /* right face */
  --gold-600: #A0916E; /* base face — core accent */
  --gold-700: #7D7052;
  --gold-800: #6F6350;
  --gold-950: #3A3428;

  /* ---- Four neutrals ---- */
  --ink:   #0A0A0C;
  --slate: #6F6B63;
  --mist:  #E4E1DA;
  --paper: #FFFFFF;
  --paper-warm: #F7F5F0;

  /* Legacy neutral aliases */
  --neutral-200: var(--graphite-200);
  --neutral-300: var(--graphite-400);
  --neutral-400: var(--graphite-600);
  --neutral-500: var(--graphite-800);
  --neutral-600: #4A473F;

  /* ---- Status. Carried by FORM and LABEL, not hue: the palette holds no
     red or green. Values below are neutral by design. ---- */
  --status-live:    var(--ink-900);
  --status-pending: var(--graphite-600);
  --status-failed:  var(--ink-900);
  --status-idle:    var(--graphite-400);
  --signal-live:    var(--status-live);
  --signal-warn:    var(--status-pending);
  --signal-error:   var(--status-failed);

  /* ---- Semantic · light surfaces ---- */
  --text-primary: var(--ink);
  --text-secondary: var(--slate);
  --text-muted: var(--graphite-600);
  --text-accent: var(--gold-800);
  --surface-page: var(--paper);
  --surface-sunken: var(--paper-warm);
  --surface-card: var(--paper);
  --border-hairline: var(--mist);
  --border-strong: var(--graphite-400);

  /* ---- Semantic · dark surfaces ---- */
  --dark-surface-page: var(--ink);
  --dark-surface-card: #131316;
  --dark-surface-raised: var(--ink-700);
  --dark-text-primary: #F2F0EB;
  --dark-text-secondary: #A5A29A;
  --dark-text-accent: var(--gold-400);
  --dark-border-hairline: rgba(201, 185, 154, 0.16);
  --dark-border-strong: rgba(201, 185, 154, 0.32);

  --accent: var(--gold-600);
  --accent-hover: var(--gold-800);
  --accent-on-dark: var(--gold-400);
  --focus-ring: var(--gold-600);
}

/* ───────── tokens/typography.css ───────── */
/* Trinovata typography — TWO typefaces only.
   Sora (display) and Archivo (workhorse), both SIL Open Font License.
   There is no monospace face: spec values, figures and metadata are set in
   Archivo 600 with tabular figures.
   SUBSTITUTION: the wordmark's own geometric face was not supplied as a font
   file. Sora is the nearest freely-licensed match. */

:root {
  --font-display: 'Sora', 'Segoe UI', sans-serif;
  --font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  /* Deprecated alias — no third face exists. Resolves to the workhorse. */
  --font-mono: var(--font-body);

  /* Ladder: base 16px, ratio 1.25 */
  --text-display: 600 61px/1.04 var(--font-display);
  --text-headline: 600 39px/1.10 var(--font-display);
  --text-title: 500 25px/1.20 var(--font-display);
  --text-subhead: 500 20px/1.30 var(--font-display);
  --text-body: 400 16px/1.70 var(--font-body);
  --text-small: 400 13px/1.60 var(--font-body);
  --text-label: 600 13px/1.20 var(--font-body);

  /* Legacy aliases kept so existing cards and kits keep rendering */
  --text-hero: 600 clamp(40px, 5.2vw, 61px)/1.04 var(--font-display);
  --text-subtitle: var(--text-subhead);
  --text-lead: 400 20px/1.6 var(--font-body);
  --text-body-sm: var(--text-small);
  --text-caption: 400 13px/1.5 var(--font-body);
  --text-eyebrow: var(--text-label);
  --text-code: 600 13px/1.6 var(--font-body);

  --tracking-display: -0.02em;
  --tracking-label: 0.12em;
  --tracking-eyebrow: 0.12em;
  --tracking-wordmark: 0.14em;

  --numeric-tabular: tabular-nums;
}

/* ───────── tokens/spacing.css ───────── */
:root {
  /* 4px base grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Section rhythm on the website */
  --section-y: 128px;
  --section-y-tight: 96px;
  --gutter: 32px;
  --measure: 68ch;
  --max-width: 1200px;
  --max-width-narrow: 760px;
}

/* ───────── tokens/shape.css ───────── */
:root {
  /* Corners are near-square. The mark is a 60° triangle; the system does not soften. */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px; /* status chips and tags only */

  --border-width: 1px;
  --border-width-strong: 2px;

  /* THE SIGNATURE DEVICE — the mark's own edge. 30° from vertical
     (60° apex, measured from the supplied artwork). Every cut, crop,
     chamfer and terminal in the system uses this one value. */
  --angle-edge: 30deg;
  --angle-apex: 60deg;
  --cut-ratio: 0.5774; /* tan(30°) — horizontal offset per unit of height */

  --shadow-sm: 0 1px 2px rgba(10, 10, 12, 0.06);
  --shadow-md: 0 4px 16px rgba(10, 10, 12, 0.08);
  --shadow-lg: 0 18px 48px rgba(10, 10, 12, 0.14);

  /* Motion — 120 micro, 200 standard, 320 large. One out-ease everywhere. */
  --duration-micro: 120ms;
  --duration-standard: 200ms;
  --duration-large: 320ms;
  --duration-fast: var(--duration-micro);
  --duration-base: var(--duration-standard);
  --duration-slow: var(--duration-large);
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.16, 1, 0.3, 1);

  --focus-width: 2px;
  --focus-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-micro: 1ms;
    --duration-standard: 1ms;
    --duration-large: 1ms;
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
  }
}