/* Title TK Design System — tokens.css  v3.2.4 (2026-10-14)
   Public stylesheet. Single source of truth for every site and app.
   Tier 1 primitives → Tier 2 semantic → Tier 3 component. Apps read Tier 2/3 only.
   Change values only in titletk-ops, together with DESIGN.md. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* ── Tier 1: primitives ───────────────────────── */
  --tk-ink:#1A1815; --tk-ink-2:#3A3630; --tk-ink-3:#6A6A6D; --tk-charcoal:#2C2A28;
  --tk-rule-strong:#C8C2B5; --tk-rule:#E5E0D6; --tk-paper-2:#FAF7F2; --tk-paper:#FFFFFF; --tk-gray-1:#F1F2F4;
  --tk-parchment:#F2EBDD; --tk-parchment-2:#EAE1CF;
  --tk-coral:#FE5D4D; --tk-coral-soft:#FFEEEC;
  --tk-lapis:#2D46B9; --tk-lapis-deep:#1B31A8; --tk-lapis-wash:#D0DAFE; --tk-lapis-tint:#F3F5FC; --tk-lapis-line:#C6CFEE; --tk-lapis-light:#7891E6; --tk-lapis-text-soft:#E8ECFF;
  --tk-yellow:#EFFB68; --tk-yellow-ring:#A8B400; --tk-green:#5FD7A7; --tk-slate:#8F9AB0;

  --tk-font-display:'Archivo',system-ui,sans-serif;
  --tk-font-body:'IBM Plex Sans',system-ui,sans-serif;
  --tk-font-mono:'IBM Plex Mono',ui-monospace,monospace;

  --tk-space-1:4px; --tk-space-2:8px; --tk-space-3:12px; --tk-space-4:16px; --tk-space-5:24px; --tk-space-6:32px; --tk-space-7:48px; --tk-space-8:64px; --tk-space-9:96px; --tk-space-10:128px;
  --tk-radius-flag:2px; --tk-radius-icon-tile:5px; --tk-radius-kbd:3px; --tk-radius-frame:4px; --tk-radius-control:6px; --tk-radius-tile:8px; --tk-radius-search:10px; --tk-radius-card:12px; --tk-radius-panel:20px; --tk-radius-pill:999px;
  --tk-ease:cubic-bezier(0.2,0,0,1); --tk-duration:180ms; --tk-duration-fast:120ms;

  /* ── Tier 2: semantic ─────────────────────────── */
  --color-text:var(--tk-ink); --color-text-2:var(--tk-ink-2); --color-text-meta:var(--tk-ink-3);
  --color-text-on-ink:var(--tk-paper); --color-text-on-ink-2:var(--tk-rule-strong);
  --color-surface:var(--tk-paper); --color-surface-soft:var(--tk-paper-2); --color-surface-editorial:var(--tk-parchment); --color-surface-editorial-2:var(--tk-parchment-2);
  --color-surface-ink:var(--tk-ink); --color-surface-ink-raised:var(--tk-charcoal);
  --color-divider:var(--tk-rule); --color-divider-strong:var(--tk-rule-strong); --color-divider-intro:var(--tk-ink);
  --color-interactive:var(--tk-lapis); --color-interactive-pressed:var(--tk-lapis-deep); --color-interactive-wash:var(--tk-lapis-wash); --color-interactive-tint:var(--tk-lapis-tint);
  --color-accent:var(--tk-coral); --color-accent-soft:var(--tk-coral-soft);
  --color-status-inbox:var(--tk-paper); --color-status-inbox-ring:var(--tk-ink-3); --color-status-inbox-ring-w:1.5px;
  --color-status-flagged:var(--tk-coral);
  --color-status-review:var(--tk-yellow); --color-status-review-ring:var(--tk-yellow-ring);
  --color-status-promoted:var(--tk-green);
  --color-status-approved:var(--tk-gray-1); --color-status-approved-ring:var(--tk-slate);
  --color-status-parked:var(--tk-slate);
  --color-source-dot:var(--tk-ink-3);
  --lab-north:var(--tk-lapis); --lab-next:var(--tk-coral-soft); --lab-flow:var(--tk-ink);

  --focus-ring:0 0 0 4px var(--tk-lapis-wash);
  --focus-glow:0 0 0 4px rgba(45,70,185,0.12);
  --ring:inset 0 0 0 1px var(--tk-rule);
  --ring-strong:inset 0 0 0 1px var(--tk-rule-strong);
  --shadow-input:0 1px 2px rgba(26,24,21,0.06);
  --shadow-ask:0 4px 12px rgba(26,24,21,0.06);
  --shadow-card-hover:0 8px 24px rgba(26,24,21,0.08);

  --page-max:1480px; --page-pad:56px; --page-pad-compact:24px; --nav-pad-y:20px; --nav-pad-x:32px;
  --section-pad:128px; --section-pad-end:128px; --header-pad-top:96px; --header-pad-bottom:64px;
  --app-sidebar-north:248px; --app-sidebar-flow:224px; --app-topbar:52px; --app-sidebar-brand-h:56px; --app-pad:32px; --app-max:1152px; --app-max-narrow:700px;
  --surface-page:var(--page-wash-app); --surface-raised:var(--tk-paper); --surface-sunken:var(--tk-paper-2);
  --page-wash-site:linear-gradient(180deg,var(--tk-lapis-tint) 0px,var(--tk-parchment) 220px);
  --page-wash-app:linear-gradient(180deg,var(--tk-lapis-tint) 0px,var(--tk-paper-2) 220px);

  /* Type: marketing */
  --type-h1-size:clamp(72px,10vw,176px); --type-h1-lh:0.92; --type-h1-tr:-0.028em;
  --type-h2-size:clamp(48px,5.5vw,88px); --type-h2-lh:0.95; --type-h2-tr:-0.024em;
  --type-h2sm-size:clamp(40px,4.5vw,72px); --type-h2sm-lh:0.98; --type-h2sm-tr:-0.022em;
  --type-h3-size:26px; --type-h3-lh:1.12; --type-h3-tr:-0.016em;
  --type-h4-size:22px; --type-h4-lh:1.2; --type-h4-tr:-0.012em;
  --type-lead-size:20px; --type-lead-lh:1.45;
  --type-body-size:15px; --type-body-lh:1.6; --type-body-long-size:17px;
  --type-nav-size:15px;
  --type-eyebrow-size:11.5px; --type-eyebrow-tr:0.18em;
  --type-row-label-size:11px; --type-row-label-tr:0.14em;
  --type-meta-size:10.5px; --type-meta-tr:0.16em;
  --type-cta-size:20px; --type-cta-size-end:22px; --type-cta-tr:-0.01em;
  /* Type: product */
  --type-app-title-size:30px; --type-app-title-tr:-0.02em; --type-app-greeting-size:40px;
  --type-app-section-size:22px;
  --type-app-body-size:14px; --type-app-card-title-size:14px; --type-app-card-title-size-lg:15px; --type-app-card-title-lh:1.3; --type-app-small-size:12.5px; --type-app-dense-size:13.5px; --type-app-micro-size:9px; --type-app-micro-tr:0.08em; --type-app-sidebar-label-size:10px; --type-app-sidebar-label-tr:0.14em; --type-app-control-size:13px; --type-app-control-sm-size:12px;
  --type-app-label-size:10.5px; --type-app-label-tr:0.12em; --type-app-id-size:11px;

  /* ── Tier 3: component ────────────────────────── */
  --btn-primary-bg:var(--tk-ink); --btn-primary-fg:var(--tk-paper); --btn-primary-bg-hover:var(--tk-lapis); --btn-primary-bg-pressed:var(--tk-lapis-deep);
  --btn-primary-on-ink-bg:var(--tk-paper); --btn-primary-on-ink-fg:var(--tk-ink);
  --btn-secondary-bg:var(--tk-paper); --btn-secondary-border:var(--tk-rule-strong); --btn-secondary-bg-hover:var(--tk-lapis-wash);
  --btn-radius:var(--tk-radius-control);
  --btn-nav-h:40px; --btn-nav-px:18px; --btn-nav-size:14.5px;
  --btn-app-py:7px; --btn-app-px:15px; --btn-app-size:13px;
  --btn-row-py:5px; --btn-row-px:12px; --btn-row-size:12px;
  --btn-send-h:32px; --btn-send-px:16px; --btn-send-size:12.5px;
  --link-cta-gap:10px; --link-cta-gap-hover:14px; --link-cta-underline:1px;
  --input-border:var(--tk-rule); --input-radius:var(--tk-radius-control); --input-focus-border:var(--tk-lapis);
  --pill-size:11.5px; --pill-bg:var(--tk-paper-2); --pill-ring:var(--ring); --pill-dot:6px; --pill-py:3px; --pill-px:9px;
  --chip-active-bg:var(--tk-lapis); --chip-active-fg:var(--tk-paper); --chip-bg:var(--tk-gray-1); --chip-fg:var(--tk-ink-2);
  --tab-active:var(--tk-lapis); --tab-underline:2px;
  --nav-current-underline:inset 0 -1.5px 0 var(--tk-lapis); --nav-gap:28px;
  --sidebar-bg:var(--tk-ink); --sidebar-fg:var(--tk-rule-strong); --sidebar-row-hover:var(--tk-charcoal); --sidebar-active-bg:var(--tk-lapis-wash); --sidebar-active-fg:var(--tk-lapis-deep); --sidebar-active-radius:8px;
  --card-panel-gap:1px; --card-panel-bg:var(--tk-rule); --card-pad-app:20px; --card-pad-y:36px; --card-pad-x:32px; --card-flag-w:28px; --card-flag-h:3px;
  --carousel-ratio:16/10;
  --overlay-hero:rgba(242,235,221,0.55); /* Parchment veil over the hero video */
}
@media (max-width:720px){ :root{ --page-pad:var(--page-pad-compact); --section-pad:80px; --section-pad-end:80px; --header-pad-top:64px; } }
@media (prefers-reduced-motion:reduce){ :root{ --tk-duration:0ms; --tk-duration-fast:0ms; } }