/* Operforma v2.7 — locked four-palette + brand token superset
   Canonical source: .claude/skills/operforma-design/colors_and_type.css
   Self-hosted fonts (woff2) with CDN fallback comment.
   All downstream CSS (base.css, pipeline.css, landing.css) is token-only;
   no changes needed there. Console-specific aliases preserved at bottom. */

/* ── Self-hosted fonts ──────────────────────────────────────────────────── */
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/satoshi-300.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/satoshi-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/satoshi-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono.woff2') format('woff2');
  font-weight: 300 500; font-style: normal; font-display: swap;
}
/* CDN fallback — uncomment if local woff2 are unavailable:
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&display=swap');
*/

:root {
  /* ── Locked four-palette ── */
  --paper:   #F7F4EF;   /* ground · warm white — working surfaces   */
  --ink:     #1A1814;   /* base · near-black — text, mark           */
  --accent:  #3B3868;   /* signal · deep indigo — decisions, active */
  --ash:     #E2DDD6;   /* line · warm grey — borders, dividers     */

  /* ── Working aliases (light / paper surface) ── */
  --fg-1:    var(--ink);
  --fg-2:    #5A5450;
  --fg-3:    #B8B2A8;
  --bg-1:    var(--paper);
  --bg-2:    var(--ash);
  --soft:    #5A5450;
  --mid:     #B8B2A8;
  --line:    #D9D3CA;

  /* ── Dark-surface tokens (marketing / statement surface only) ── */
  --indigo:       #3B3868;
  --indigo-lt:    #5E5A8C;
  --indigo-soft:  #A8A2D0;
  --grey:         #E2DDD6;
  --grey-mid:     #B8B2A8;
  --grey-soft:    #5A5450;
  --grey-line:    #D9D3CA;
  --line-dark:    #34302A;
  --surface:      #211E19;
  --white:        #F7F4EF;
  --black:        #1A1814;

  /* ── Conversion CTA ── */
  --cta-bg:        var(--indigo);
  --cta-bg-hover:  var(--indigo-soft);
  --cta-fg:        var(--paper);

  /* ── Type registers (never blended) ── */
  --font-display: 'Satoshi', system-ui, -apple-system, sans-serif;
  --font-body:    'Satoshi', system-ui, -apple-system, sans-serif;
  --font-serif:   'Satoshi', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font:         var(--font-body);

  /* ── Tracking ── */
  --track-tight:   -0.01em;   /* console display headlines */
  --track-snug:    -0.015em;
  --track-normal:  0;
  --track-mono:    0.12em;    /* console mono tags / eyebrows (uppercase) */
  --track-eyebrow: 0.14em;
  --track-wordmark: 0.22em;

  /* ── Spacing scale ── */
  --space-xs:  8px;
  --space-s:  16px;
  --space-m:  32px;
  --space-l:  64px;
  --space-xl: 120px;

  /* ── Layout ── */
  --nav-h:        58px;
  --wrap:         1160px;
  --content-max:  1040px;
  --gap:          2px;
  --radius:       2px;

  /* ── Breakpoints ── */
  --bp-sm: 640px;
  --bp-md: 960px;
  --bp-lg: 1280px;

  /* ── Sanctioned focus ring ── */
  --focus: var(--accent);

  /* ── Console-specific aliases (pipeline UI) ── */
  --lead:        var(--paper);
  --hot:         var(--accent);
  --gold:        var(--accent);
  --tone-ok:     var(--accent);
  --tone-warn:   var(--accent);
  --tone-err:    var(--accent);
  --tone-mid:    var(--mid);
  --tone-ash:    var(--ash);
  --tone-hot:    var(--accent);
  --tone-accent: var(--accent);
}

/* ── Semantic typography (utility classes) ────────────────────────────── */
html { font-size: 16px; }

.op-display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}
.op-h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.1;
  letter-spacing: var(--track-snug);
  color: var(--fg-1);
}
.op-h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.15;
  letter-spacing: var(--track-snug);
  color: var(--fg-1);
}
.op-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.op-body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.78;
  color: var(--fg-1);
}
.op-body-sm {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-2);
}
.op-prose {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.78;
  color: var(--fg-1);
  max-width: 60ch;
}
.op-eyebrow {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.op-coord {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
}
.op-coord::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}
.op-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: var(--track-mono);
  color: var(--fg-1);
}
.op-wordmark {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 18px;
  letter-spacing: var(--track-wordmark);
  text-transform: lowercase;
  color: var(--fg-1);
  text-decoration: none;
}

/* ── Dark-surface scope ─────────────────────────────────────────────────
   Apply .op-dark to any near-black region; semantic aliases auto-swap. */
.op-dark {
  --fg-1:   var(--white);
  --fg-2:   var(--grey-mid);
  --fg-3:   var(--grey-soft);
  --bg-1:   var(--black);
  --bg-2:   var(--surface);
  --line:   var(--line-dark);
  --accent: var(--indigo-soft);
  color: var(--white);
  background: var(--black);
}
.op-dark .op-eyebrow,
.op-dark .op-coord { color: var(--indigo-soft); }

/* ── Chart scope ────────────────────────────────────────────────────────
   Grey = current state · Indigo = target state (RAD proposals).
   These tonal stops are sanctioned ONLY inside [data-chart]. */
[data-chart] {
  --chart-grey-1:   #5A5450;
  --chart-grey-2:   #B8B2A8;
  --chart-grey-3:   #E2DDD6;
  --chart-indigo-1: #3B3868;
  --chart-indigo-2: #5E5A8C;
  --chart-indigo-3: #A8A2D0;
  --chart-axis:     #B8B2A8;
  --chart-grid:     #E2DDD6;
  --chart-rule:     #1A1814;
}