/* Axeron brand tokens — verbatim from brand-core references/assets/colors_and_type.css
   (axeron-design-suite 1.14.0), with ONE change: the Google Fonts @import is replaced
   by the self-hosted faces Perception already serves at /fonts/ (no visitor IP leaves
   for a third party; the CSP allows font-src 'self' only). Do not edit tokens here —
   re-copy from brand-core. © 2026 Axeron AI Inc. All rights reserved. */
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/inter-tight-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/inter-tight-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/inter-tight-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/inter-tight-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
/* ═══════════════════════════════════════════════════════════════════════════
   AXERON AI — Colors & Type Foundation
   "Obsidian + bone." Editorial neo-grotesk. Restrained glass. Sovereign-serious.
   The single, distilled token file. Import this first, everywhere.
   ═══════════════════════════════════════════════════════════════════════════ */


:root {
  /* ── PAPER & INK (the whole palette is grayscale + one accent) ─────────── */
  --paper:        #f6f4ef;   /* warm bone — body background */
  --paper-2:      #efece5;   /* inset / muted surfaces */
  --paper-3:      #e7e3d9;   /* divider tint */
  --bone:         #fbfaf6;   /* elevated card surface */

  --ink:          #0a0b0d;   /* near-black — primary ink, headlines, primary buttons */
  --ink-1:        #2a2d33;   /* primary body text */
  --ink-2:        #5b6067;   /* secondary text */
  --ink-3:        #8a8f97;   /* tertiary / labels / eyebrows */
  --ink-4:        #b6bac0;   /* quaternary / placeholders */
  --ink-5:        #d8dae0;   /* hairlines / disabled */

  /* ── HAIRLINES (ink at low alpha — the workhorse border) ───────────────── */
  --hair:         rgba(10, 11, 13, 0.08);
  --hair-strong:  rgba(10, 11, 13, 0.14);
  --hair-soft:    rgba(10, 11, 13, 0.04);

  /* ── THE ONE ACCENT — IMPERIAL RED ─────────────────────────────────────── */
  /* Reserved for: (a) the peak mark (the logo carries the red), (b) the
     metadata "·" separator dot, (c) deliberate editorial accent dots.
     NEVER body, headlines, dividers, fills, or backgrounds. */
  --imperial-red: #BA0021;

  /* ── SIGNAL (muted amber — sparing UI emphasis, "needs attention") ─────── */
  --signal:       oklch(68% 0.14 62);
  --signal-ink:   oklch(38% 0.10 62);       /* on-light text variant */
  --signal-wash:  oklch(68% 0.14 62 / 0.10);

  /* ── FUNCTIONAL (muted, never candy) ───────────────────────────────────── */
  --ok:           oklch(55% 0.09 155);
  --ok-wash:      oklch(55% 0.09 155 / 0.09);
  --warn:         oklch(68% 0.14 62);
  --warn-wash:    oklch(68% 0.14 62 / 0.09);
  --crit:         oklch(52% 0.17 25);
  --crit-wash:    oklch(52% 0.17 25 / 0.09);

  /* ─────────────────────────────────────────────────────────────────────────
     TYPOGRAPHY — three families, no more
     Inter Tight (everything) · Instrument Serif italic (emphasis, decks/docs)
     · JetBrains Mono (chrome, metadata, numbers)
     ───────────────────────────────────────────────────────────────────────── */
  --font-sans:    "Inter Tight", "Söhne", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-serif:   "Instrument Serif", Georgia, "Times New Roman", serif;   /* italic emphasis in decks/docs */
  --font-display: "Inter Tight", "Söhne", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", "Berkeley Mono", ui-monospace, monospace;

  /* Type ramp — base sizes (px, screen) */
  --t-display:    72px;   /* hero / page H1 */
  --t-h1:         48px;
  --t-h2:         36px;
  --t-h3:         22px;
  --t-title:      17px;   /* card title */
  --t-body:       14.5px;
  --t-secondary:  13px;
  --t-meta:       11px;
  --t-eyebrow:    10.5px;

  /* ── MOTION — one spring, three durations ──────────────────────────────── */
  --ease:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-io: cubic-bezier(0.4, 0, 0.2, 1);
  --d-1: 120ms;   /* taps, hovers */
  --d-2: 220ms;   /* lifts, reveals */
  --d-3: 420ms;   /* page-level rise */

  /* ── RADIUS ────────────────────────────────────────────────────────────── */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 22px;
  --r-6: 28px;
  --r-pill: 999px;

  /* ── ELEVATION (discreet, warm — shadows are ink, never blue) ──────────── */
  --el-0: none;
  --el-1: 0 1px 0 rgba(10,11,13,0.04), 0 1px 2px rgba(10,11,13,0.04);
  --el-2: 0 2px 4px rgba(10,11,13,0.04), 0 8px 20px rgba(10,11,13,0.06);
  --el-3: 0 4px 12px rgba(10,11,13,0.06), 0 24px 48px rgba(10,11,13,0.08);
  --el-4: 0 8px 24px rgba(10,11,13,0.08), 0 48px 96px rgba(10,11,13,0.10);

  /* ── SPACING — 4px base, 8px grid ──────────────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE RESET — so this file stands alone (Inter Tight everywhere, paper ground)
   ═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body { margin: 0; padding: 0; font-weight: 400; line-height: 1.5; letter-spacing: -0.005em; }

/* ═══════════════════════════════════════════════════════════════════════════
   SEMANTIC TYPE ROLES — apply directly to elements
   ═══════════════════════════════════════════════════════════════════════════ */

.ax-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-display);
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: var(--ink);
}
/* Emphasis convention: a light-weight roman "counter-phrase", not italic.
   The editorial pattern is: [plain statement], [light counter-phrase]. */
.ax-display em { font-style: normal; font-weight: 300; color: var(--ink-2); }

h1, .ax-h1 { font-family: var(--font-display); font-size: var(--t-h1); font-weight: 400; letter-spacing: -0.025em; line-height: 1.02; color: var(--ink); margin: 0; }
h2, .ax-h2 { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 400; letter-spacing: -0.02em;  line-height: 1.1;  color: var(--ink); margin: 0; }
h3, .ax-h3 { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.015em; line-height: 1.2;  color: var(--ink); margin: 0; }
.ax-h1 em, .ax-h2 em, .ax-h3 em, h1 em, h2 em, h3 em { font-style: normal; font-weight: 300; color: var(--ink-2); }

.ax-card-title { font-family: var(--font-sans); font-size: var(--t-title); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--ink); }
.ax-body      { font-family: var(--font-sans); font-size: var(--t-body); font-weight: 400; line-height: 1.6; color: var(--ink-1); }
.ax-secondary { font-family: var(--font-sans); font-size: var(--t-secondary); font-weight: 400; line-height: 1.55; color: var(--ink-2); }
.ax-meta      { font-family: var(--font-sans); font-size: var(--t-meta); font-weight: 400; line-height: 1.45; color: var(--ink-3); }

/* Eyebrow — mono, uppercase, wide-tracked. The chrome label of the system. */
.ax-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Serif emphasis — ONLY in decks and long-form documents, italic. */
.ax-serif    { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.015em; }

/* Mono numerals — metrics, IDs, timestamps, table figures */
.ax-mono     { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ax-num      { font-family: var(--font-display); font-variant-numeric: tabular-nums lining-nums; font-weight: 500; letter-spacing: -0.028em; }

/* The red-dot rule — metadata separators render imperial red */
.ax-dot-sep { color: var(--imperial-red); }