/* ============================================================
   TELOSYN FOUNDATION — canonical design tokens
   Version: 2.1.0 · 2026-09-25 (ratified by the architect)
   Supersedes 1.1.0 (2026-07-01). MAJOR: accent value changed.
   ------------------------------------------------------------
   CANONICAL HOME: this file (telosyn-site/css/telosyn-foundation.css).
   Claude Design bundles must carry this version string.

   Changes from 1.1.0
   - Accent: --t-blue #001EFF is THE accent (links, kickers, CTAs,
     focus). --t-navy #1B3A8F is retained as secondary (hover/pressed,
     structural fills). .t-kicker now renders in --t-blue.
   - Body face: IBM Plex Sans (was Inter).
   - Display faces by role: --t-font-head Source Serif 4 (primary),
     --t-font-head-exec Newsreader (executive), --t-font-head-cer
     Spectral (ceremonial, abyss ground only; not self-hosted).
   - Added: color tiers II–IV, leading/tracking/weight tokens,
     wrap/gutter, pill + photo radii, commitment rule, shadows,
     slow duration, canonical classes .t-intent .t-link
     .t-commitment .t-chip .t-button, expression scopes.
   - No Google Fonts @import: every face is self-hosted via
     css/fonts.css (the design bundle's CDN import is not carried).

   RULES (carried from 1.x)
   - R8: accent must never collide with Khipu cobalt (#2458D6)
         or P&A accent semantics.
   - R9: Eight One is wordmark-only. The ONLY selector permitted
         to reference --t-font-mark is .t-wordmark. Grep-enforced.
   - Provenance voice: metadata renders in mono via .t-provenance.
     Never render a data value without its verification date (AE3).
   - One accent element per viewport. Cyan is never text on light.
   ============================================================ */

:root {
  /* ---- Color · Tier I · Institutional ---- */
  --t-blue:      #001EFF;  /* THE accent. Links, kickers, CTAs, focus. One per viewport. */
  --t-ink:       #16181D;  /* primary text, photo scrims */
  --t-gallery:   #FBFAF8;  /* page ground */

  /* ---- Color · Tier II · Supporting ---- */
  --t-cyan:      #00E5FF;  /* logo ring + rule, data highlight ring, accent on dark. Never text on light. */
  --t-navy:      #1B3A8F;  /* secondary: hover/pressed of blue, series 02, structural fills. v1 accent. */
  --t-graphite:  #5A5F6A;  /* secondary text */
  --t-mono-ink:  #3D4450;  /* provenance / metadata text */
  --t-rule:      #E4E1DB;  /* 1px hairlines */
  --t-surface:   #FFFFFF;  /* cards, hero panel */

  /* ---- Color · Tier III · Expressive (abyss register: decks, ceremonial, demos — not the corporate site) ---- */
  --t-abyss:          #05071C;
  --t-abyss-surface:  #0B0F2E;
  --t-abyss-rule:     #1A2050;
  --t-abyss-graphite: #9CA3C4;
  --t-abyss-text:     #F2F3F9;

  /* ---- Color · Tier IV · Functional — data series, order fixed; cyan marks the selected value only ---- */
  --t-viz-1: #001EFF;
  --t-viz-2: #1B3A8F;
  --t-viz-3: #7B8BFF;
  --t-viz-4: #0A9AAE;
  --t-viz-5: #5A5F6A;
  --t-viz-6: #C9CCD6;
  --t-viz-highlight: #00E5FF;

  /* ---- Scrims ---- */
  --t-scrim-ink-top:    rgba(22, 24, 29, .82);
  --t-scrim-ink-mid:    rgba(22, 24, 29, .66);
  --t-scrim-ink-bottom: rgba(22, 24, 29, .92);
  --t-scrim-light:      rgba(255, 254, 252, .9);
  --t-on-ink:           #FBFAF8;
  --t-on-ink-72:        rgba(251, 250, 248, .72);
  --t-on-ink-65:        rgba(251, 250, 248, .65);
  --t-on-ink-60:        rgba(251, 250, 248, .6);
  --t-on-ink-rule:      rgba(251, 250, 248, .14);

  /* ---- Semantic aliases ---- */
  --text-primary:    var(--t-ink);
  --text-secondary:  var(--t-graphite);
  --text-meta:       var(--t-mono-ink);
  --text-accent:     var(--t-blue);
  --surface-page:    var(--t-gallery);
  --surface-card:    var(--t-surface);
  --border-hairline: var(--t-rule);
  --focus-ring:      var(--t-blue);

  /* ---- Type families (roles are constitutional; faces fill them) ---- */
  --t-font-mark:      'EightOne';                                  /* wordmark ONLY (R9) */
  --t-font-head:      'Source Serif 4', Georgia, serif;            /* primary display */
  --t-font-head-exec: 'Newsreader', Georgia, serif;                /* executive display */
  --t-font-head-cer:  'Spectral', Georgia, serif;                  /* ceremonial display: abyss ground only */
  --t-font-body:      'IBM Plex Sans', -apple-system, sans-serif;  /* body, UI */
  --t-font-mono:      'IBM Plex Mono', ui-monospace, monospace;    /* provenance voice */

  /* ---- Type scale (px; 4px baseline) ---- */
  --t-size-display: 38px;
  --t-size-h2:      30px;
  --t-size-h3:      21px;
  --t-size-body:    15.5px;
  --t-size-small:   13px;
  --t-size-meta:    11.5px;
  --t-size-kicker:  11px;
  --t-size-stat:    44px;

  --t-leading-display: 1.12;
  --t-leading-h2:      1.2;
  --t-leading-h3:      1.3;
  --t-leading-body:    1.6;
  --t-tracking-display: -.015em;
  --t-tracking-h2:      -.01em;
  --t-tracking-kicker:  .18em;
  --t-tracking-mark:    .05em;

  --t-weight-head:   500;
  --t-weight-body:   400;
  --t-weight-ui:     500;
  --t-weight-strong: 600;

  /* ---- Rhythm (five steps; nothing in between) ---- */
  --t-space-1: 8px;
  --t-space-2: 16px;
  --t-space-3: 28px;
  --t-space-4: 48px;
  --t-space-5: 80px;

  --t-radius:            4px;
  --t-radius-pill:       999px;
  --t-radius-card-photo: 10px;
  --t-rule-w:            1px;  /* hairlines only */
  --t-rule-commit-w:     2px;  /* the commitment bar — the only non-hairline rule */

  --t-wrap:      1160px;
  --t-wrap-text: 720px;
  --t-gutter:    48px;   /* desktop; 24 tablet; 16 mobile */

  /* ---- Motion (restraint is the register) ---- */
  --t-ease:          cubic-bezier(.25,.6,.35,1);
  --t-duration:      160ms;  /* hover ceiling; text never animates */
  --t-duration-slow: 700ms;  /* reveal-on-scroll */

  --t-shadow-card: 0 24px 56px rgba(22, 24, 29, .16);
  --t-shadow-pop:  0 12px 32px rgba(22, 24, 29, .10);
}

/* ---- Wordmark face (paths resolve in-repo). Text faces: css/fonts.css ---- */
@font-face { font-family:'EightOne'; src:url('../fonts/EightOne.ttf') format('truetype'); font-weight:400; font-display:swap; }

/* ---- Canonical components ---- */
.t-wordmark {
  font-family: var(--t-font-mark), sans-serif;  /* sole permitted use of --t-font-mark */
  letter-spacing: var(--t-tracking-mark);
  font-weight: 400;
  color: var(--t-ink);
  text-transform: lowercase;  /* ratified 2026-07-01: canonical rendering is "telosyn. inc." — never uppercase */
}

.t-provenance {
  font-family: var(--t-font-mono);
  font-size: var(--t-size-meta);
  color: var(--t-mono-ink);
  font-variant-numeric: tabular-nums;
  /* Content contract: KPI · coverage · source · verified YYYY-MM-DD */
}

.t-kicker {
  font-family: var(--t-font-mono);
  font-size: var(--t-size-kicker);
  letter-spacing: var(--t-tracking-kicker);
  text-transform: uppercase;
  color: var(--t-blue);
}

.t-intent { font-family: var(--t-font-head); font-style: italic; font-weight: 400; font-size: var(--t-size-h3); line-height: var(--t-leading-h3); }
.t-link { color: var(--t-blue); font-size: var(--t-size-small); font-weight: 500; text-decoration: none; }
.t-link:hover, .t-link:focus-visible { text-decoration: underline; color: var(--t-navy); }
.t-commitment { color: var(--t-graphite); font-size: var(--t-size-small); border-left: var(--t-rule-commit-w) solid var(--t-rule); padding-left: var(--t-space-2); }
.t-chip { font-family: var(--t-font-body); font-size: 12.5px; font-weight: 500; border: 1px solid var(--t-rule); background: var(--t-gallery); color: var(--t-ink); border-radius: var(--t-radius-pill); padding: 7px 16px; cursor: pointer; transition: border-color var(--t-duration) var(--t-ease), background var(--t-duration) var(--t-ease), color var(--t-duration) var(--t-ease); }
.t-chip:hover { border-color: var(--t-blue); }
.t-chip[aria-pressed="true"] { border-color: var(--t-blue); background: var(--t-blue); color: var(--t-gallery); }
.t-button { font-family: var(--t-font-body); font-size: 13.5px; font-weight: 500; border: 1px solid var(--t-blue); background: var(--t-gallery); color: var(--t-blue); border-radius: var(--t-radius-pill); padding: 10px 22px; cursor: pointer; transition: background var(--t-duration) var(--t-ease), color var(--t-duration) var(--t-ease); }
.t-button:hover { background: var(--t-blue); color: var(--t-gallery); }
.t-button:active { background: var(--t-navy); border-color: var(--t-navy); color: var(--t-gallery); }
.t-button:focus-visible { outline: 2px solid var(--t-blue); outline-offset: 2px; }

[data-expression="executive"] h1, [data-expression="executive"] h2, [data-expression="executive"] h3 { font-family: var(--t-font-head-exec); }
[data-expression="ceremonial"] { background: var(--t-abyss); color: var(--t-abyss-text); }
[data-expression="ceremonial"] h1, [data-expression="ceremonial"] h2 { font-family: var(--t-font-head-cer); }
[data-expression="ceremonial"] .t-kicker { color: var(--t-cyan); }

@media (prefers-reduced-motion: reduce) { .t-chip, .t-button { transition: none; } }

/* ---- Stage flags (R10 dormant-section contract) ----
   [data-stage="trust-module"]           trigger: first named customer / real certification
   [data-stage="pa-front"]               trigger: first published P&A issue
   [data-stage="product-split-expanded"] trigger: product subdomains live
   Dormant = not rendered in dist (build-time removal), not display:none. */