/* =========================================================
   tokens.css  —  Vloxq / Amnesis Design Tokens
   Single source of truth for color, type, spacing, motion.
   Loaded as the FIRST stylesheet on every public page.
   No selectors here that aren't variable definitions or
   semantic role utility classes (.ds-*).
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ——— Neutral (dark mode primary) ——— */
  --ink:        #0A1220;
  --ink-2:      #121B2D;
  --ink-3:      #1B2742;
  --ink-4:      #27334F;
  --ink-line:   rgba(255,255,255,0.08);
  --ink-line-2: rgba(255,255,255,0.14);

  /* ——— Neutral (light / marketing alt) ——— */
  --bone:       #F3EFE6;
  --paper:      #FFFFFF;
  --paper-2:    #FAF7F0;
  --graphite:   #2A3142;
  --graphite-2: #4A5468;
  --graphite-3: #6B7383;
  --bone-line:  rgba(10,18,32,0.10);
  --bone-line-2:rgba(10,18,32,0.18);

  /* ——— Foreground on ink ——— */
  --fg-1: #F3EFE6;
  --fg-2: rgba(243,239,230,0.72);
  --fg-3: rgba(243,239,230,0.48);
  --fg-4: rgba(243,239,230,0.28);

  /* ——— Foreground on bone ——— */
  --fgl-1: #0A1220;
  --fgl-2: #2A3142;
  --fgl-3: #6B7383;
  --fgl-4: rgba(10,18,32,0.35);

  /* ——— Semantic signals (four-color system) ——— */
  --verified:       #35B7C8;   /* cyan — evidence-bound */
  --verified-soft:  #1E5F6A;
  --verified-bg:    rgba(53,183,200,0.12);
  --verified-line:  rgba(53,183,200,0.35);

  --inferred:       #E8A02E;   /* amber — model-inferred, unverified */
  --inferred-soft:  #8A5E1A;
  --inferred-bg:    rgba(232,160,46,0.12);
  --inferred-line:  rgba(232,160,46,0.35);

  --error:          #D14343;
  --error-soft:     #7A2626;
  --error-bg:       rgba(209,67,67,0.12);
  --error-line:     rgba(209,67,67,0.35);

  --ok:             #2E8B6A;   /* pine — deployed / passing */
  --ok-soft:        #1B5040;
  --ok-bg:          rgba(46,139,106,0.14);
  --ok-line:        rgba(46,139,106,0.35);

  /* ——— Type families ——— */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: 'Inter Tight', 'Inter', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ——— Type scale ——— */
  --fz-mono-micro: 10px;
  --fz-label:  11px;
  --fz-caption:12px;
  --fz-body:   14px;
  --fz-body-l: 16px;
  --fz-lead:   18px;
  --fz-h5:     20px;
  --fz-h4:     24px;
  --fz-h3:     32px;
  --fz-h2:     44px;
  --fz-h1:     60px;
  --fz-display:80px;

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-body:  1.5;
  --lh-loose: 1.65;

  --ls-label: 0.14em;
  --ls-mono:  0.02em;
  --ls-tight: -0.02em;

  /* ——— Spacing (8px grid + half-steps) ——— */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ——— Radii ——— */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 12px;
  --r-pill: 999px;

  /* ——— Shadow ——— */
  --sh-card-ink:  inset 0 1px 0 rgba(255,255,255,0.04);
  --sh-float-ink: 0 4px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
  --sh-card-bone: 0 1px 0 rgba(10,18,32,0.04);
  --sh-float-bone:0 4px 20px rgba(10,18,32,0.08);

  /* ——— Motion ——— */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-io:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
}

/* ——— Semantic role utility classes ——— */
.ds-display    { font-family: var(--font-display); font-size: var(--fz-display); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: 600; }
.ds-h1         { font-family: var(--font-display); font-size: var(--fz-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: 600; }
.ds-h2         { font-family: var(--font-display); font-size: var(--fz-h2); line-height: var(--lh-snug);  letter-spacing: -0.01em;        font-weight: 600; }
.ds-h3         { font-family: var(--font-sans);    font-size: var(--fz-h3); line-height: var(--lh-snug);  font-weight: 600; }
.ds-h4         { font-family: var(--font-sans);    font-size: var(--fz-h4); line-height: var(--lh-snug);  font-weight: 600; }
.ds-h5         { font-family: var(--font-sans);    font-size: var(--fz-h5); line-height: var(--lh-snug);  font-weight: 600; }
.ds-lead       { font-family: var(--font-sans);    font-size: var(--fz-lead); line-height: var(--lh-body); font-weight: 400; }
.ds-body       { font-family: var(--font-sans);    font-size: var(--fz-body); line-height: var(--lh-body); font-weight: 400; }
.ds-caption    { font-family: var(--font-sans);    font-size: var(--fz-caption); line-height: var(--lh-body); font-weight: 400; }
.ds-label      { font-family: var(--font-sans);    font-size: var(--fz-label); line-height: 1; letter-spacing: var(--ls-label); font-weight: 600; text-transform: uppercase; }
.ds-mono       { font-family: var(--font-mono);    font-size: var(--fz-body); line-height: var(--lh-body); letter-spacing: var(--ls-mono); }
.ds-mono-sm    { font-family: var(--font-mono);    font-size: var(--fz-caption); letter-spacing: var(--ls-mono); }
.ds-mono-micro { font-family: var(--font-mono);    font-size: var(--fz-mono-micro); letter-spacing: var(--ls-mono); }