/*
 * PairRail UI v2 "Quiet Precision": design tokens.
 * Single source of truth for v2 surfaces. Spec: design/stitch-v2/DESIGN.md (it wins on conflict).
 *
 * Namespaced (--color-*, --font-*, --type-*, --space-*, --radius-*, --shadow-*, --layout-*,
 * --motion-*) so this file can load next to the v1 :root in /styles.css (--ink, --muted,
 * --line, --text-body, ...) without changing any existing page.
 *
 * Fonts: v2 pages load Geist + JetBrains Mono in <head> (see components.css header).
 *
 * Stitch per-page names normalized here; do not reintroduce them:
 *   canvas           <- bg-white, #ffffff
 *   subtle           <- subtle (#fafafa), bg-zinc-50, surface (#fcfdfe), background (#f9f9f9)
 *   sunken           <- bg-zinc-100, bg-zinc-50/50 (inputs), surface-container-low
 *   ink              <- ink, #0a0a0a, text-zinc-900
 *   ink-secondary    <- ink-secondary, muted (#525866), text-zinc-600/700/800, on-surface
 *   ink-muted        <- ink-muted, subtle (#8a909d), text-zinc-400/500, on-surface-variant
 *   border           <- border, borderline (#dfe4ea), #e4e4e7, border-zinc-100/200
 *   border-strong    <- border-zinc-300/400, outline-variant
 *   rail             <- rail, rail-green, primary (#0a6c48), surface-tint, #19744f
 *   rail-hover       <- rail-green-hover, #145c41, primary-dim
 *   rail-soft        <- rail-soft (#e8f5ee), badge-green-bg (#e3f4ea), #e8f3ee
 *   rail-soft-border <- badge-green-border (#c3e8d2), #c3e6d2, rail/20
 *   warning-*        <- text-amber-700, bg-amber-50, border-amber-200/60, bg-amber-500
 *   code-*           <- #0a0a0a, #262626 / zinc-800, #d4d4d4 / zinc-100, #a3a3a3
 *   font-sans        <- font-sans / body / display / headline-* / body-* (Geist)
 *   font-mono        <- font-mono / code / label (JetBrains Mono)
 */

:root {
  /* —— Neutrals —— */
  --color-canvas: #ffffff;
  --color-subtle: #fafafa;
  --color-sunken: #f4f4f5;
  --color-ink: #0a0a0a;
  --color-ink-secondary: #3f3f46;
  --color-ink-muted: #71717a;
  --color-border: #e4e4e7;
  --color-border-strong: #d4d4d8;
  --color-input-border: #8a8a93;           /* form field boundary: 3.42:1 on white (WCAG 1.4.11) */

  /* —— Rail Green ——
   * Only: primary CTA buttons, the "Human approval" badge, the logo, and the rail motif
   * (hero transition, How-it-works steps, line into the approval badge). Nothing else:
   * no links, focus rings, status pills, charts or syntax colors. One filled green
   * button per viewport. */
  --color-rail: #19744f;
  --color-rail-hover: #145c41;
  --color-on-rail: #ffffff;

  /* —— Status ("Needs review" only; "Ready" is a neutral pill) —— */
  --color-pill-bg: var(--color-sunken);
  --color-pill-text: var(--color-ink);

  /* —— The one dark surface per page (dark band or code panel) —— */
  --color-dark-bg: #0a0a0a;
  --color-dark-bg-green: #0b0f0d;          /* optional faint green cast for the band */
  --color-dark-text: #e4e4e7;              /* zinc-200 */
  --color-dark-text-strong: #ffffff;
  --color-dark-muted: #a1a1aa;             /* zinc-400: eyebrows, comments */
  --color-dark-hairline: rgba(255, 255, 255, 0.08);
  --color-code-bg: var(--color-dark-bg);

  /* —— Type —— */
  --font-sans: "Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --numeric-prices: tabular-nums;

  /* display: 44px at 375 wide → 88px at ≥1280 wide (DESIGN: 72–88 desktop, 44–52 mobile) */
  --type-display-size: clamp(44px, calc(20px + 5.4vw), 88px);
  --type-display-leading: 1;
  --type-display-weight: 600;
  --type-display-tracking: -0.03em;

  --type-h1-size: clamp(36px, calc(24px + 1.9vw), 48px);
  --type-h1-leading: 1.08;                 /* 52px at 48 */
  --type-h1-weight: 600;
  --type-h1-tracking: -0.03em;

  --type-h2-size: clamp(32px, calc(26px + 1.1vw), 40px);
  --type-h2-leading: 1.15;                 /* 46px at 40 */
  --type-h2-weight: 600;
  --type-h2-tracking: -0.025em;

  --type-h3-size: 22px;
  --type-h3-leading: 30px;
  --type-h3-weight: 600;
  --type-h3-tracking: -0.01em;

  --type-body-lg-size: 20px;  --type-body-lg-leading: 32px;
  --type-body-size: 17px;     --type-body-leading: 28px;
  --type-note-size: 16px;    --type-note-leading: 24px;   /* prose notes, footnotes: never below 16px */
  --type-small-size: 15px;    --type-small-leading: 24px;
  --type-mono-size: 15px;     --type-mono-leading: 24px;
  --type-code-size: 14px;
  --type-badge-size: 13px;
  --type-caption-size: 13px;               /* footer copyright, legal links, plan pill */

  --type-eyebrow-size: 13px;
  --type-eyebrow-leading: 18px;
  --type-eyebrow-weight: 500;
  --type-eyebrow-tracking: 0.07em;         /* DESIGN: 0.06–0.08em */

  --type-button-size: 16px;
  --type-button-leading: 20px;
  --type-button-weight: 500;

  --type-wordmark-nav-size: 19px;          /* measured from the Stitch nav lockup */
  --type-wordmark-footer-size: var(--type-small-size);
  --type-wordmark-weight: 600;
  --type-wordmark-tracking: -0.02em;

  --measure: 65ch;
  --measure-prose: 50ch;                   /* ≈ 68–75 characters a line in Geist (its "0", the ch unit, is wider than an average letter) */

  /* —— Spacing (4px base) —— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 160px;

  /* —— Layout —— */
  --layout-max: 1200px;                    /* container incl. padding */
  --layout-gutter: var(--space-6);         /* 32px ≥ 768 wide */
  --layout-gutter-mobile: var(--space-4);  /* 16px */
  --layout-section-y: var(--space-10);     /* marketing, desktop */
  --layout-section-y-mobile: var(--space-9);
  --layout-nav-height: 72px;
  --control-height-marketing: 48px;
  --control-height-app: 40px;
  --control-pad-x: 20px;
  --logo-mark-nav: 28px;
  --logo-mark-footer: 20px;
  --logo-gap: 10px;

  /* —— Radii —— */
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-pill: 9999px;
  --radius-mark-nav: 6px;
  --radius-mark-footer: 4px;

  /* —— Lines, shadows, focus —— */
  --hairline: 1px solid var(--color-border);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -12px rgba(0, 0, 0, 0.08);
  --rail-width: 2px;                       /* rail motif: 1–2px Rail Green line */
  --shadow-rail-glow: 0 0 12px rgba(25, 116, 79, 0.45); /* only inside the dark band */
  --focus-ring: 2px solid var(--color-ink); /* neutral; never green */
  --focus-ring-offset: 2px;

  /* —— Motion (max 3 animations per page; all honor prefers-reduced-motion) —— */
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-hero-max: 1200ms;
  --motion-rail-draw: 600ms;
  --motion-ui: 160ms;
}

/* —— Semantic color v3 (DESIGN.md "Semantic color system (v3)") ——
 * Every hue is a meaning: live (approved, published, the primary action), approval
 * (a person decides, caps), agent (agent and protocol activity), blocked (denied,
 * failed, over limit), audit (audit trail only). Each role: solid, on, text (AA on
 * canvas and tint), tint, border. One strong (solid) accent per viewport. */
:root {
  color-scheme: light dark;
  --color-live-solid: #19744f;     --color-live-on: #ffffff;     --color-live-text: #146140;     --color-live-tint: #ebf5ef;     --color-live-border: #bfe3cd;
  --color-approval-solid: #b45309; --color-approval-on: #ffffff; --color-approval-text: #92400e; --color-approval-tint: #fdf4e3; --color-approval-border: #f3d29b;
  --color-agent-solid: #2563eb;    --color-agent-on: #ffffff;    --color-agent-text: #1d4ed8;    --color-agent-tint: #eaf1fe;    --color-agent-border: #bcd0fb;
  --color-blocked-solid: #c0352b;  --color-blocked-on: #ffffff;  --color-blocked-text: #a52a21;  --color-blocked-tint: #fdeceb;  --color-blocked-border: #f4c2bd;
  --color-audit-solid: #6d4bd1;    --color-audit-on: #ffffff;    --color-audit-text: #5b3cc0;    --color-audit-tint: #f1edfc;    --color-audit-border: #d3c7f5;
  --color-raised: #ffffff;
  --glow-live: radial-gradient(closest-side, rgb(25 116 79 / 0.16), rgb(25 116 79 / 0.05) 55%, transparent);
  --shadow-card-tinted: 0 1px 2px rgb(10 10 10 / 0.04), 0 18px 40px -22px rgb(25 116 79 / 0.28);
  --selection-bg: #cfe8da;
  /* v3.1 (DESIGN.md "v3.1 additions"): theme-aware utility tokens. */
  --chart-grid: #e4e4e7;
  --chart-axis: #71717a;
  --shadow-chip: 0 1px 2px rgb(10 10 10 / 0.06);
  --color-overlay: rgb(10 10 10 / 0.4);
  --color-frost: rgb(255 255 255 / 0.94);
  --band-bg: var(--color-canvas);
  --band-rail: rgb(25 116 79 / 0.4);
  --demo-bg: #f3f9f5;
  /* Aliases: the v2 names keep working and now follow the semantic roles. */
  --color-rail-soft: var(--color-live-tint);
  --color-rail-soft-border: var(--color-live-border);
  --color-warning-text: var(--color-approval-text);
  --color-warning-bg: var(--color-approval-tint);
  --color-error-text: var(--color-blocked-text);
}

/* Dark: designed surfaces, not an inversion. Code panels and the dark band stay dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-canvas: #0b0b0c; --color-subtle: #111113; --color-sunken: #18181b; --color-raised: #151517;
    --color-ink: #ededef; --color-ink-secondary: #b4b4bb; --color-ink-muted: #8b8b94;
    --color-border: #26262a; --color-border-strong: #3a3a40; --color-input-border: #6b6b74;
    --color-rail-hover: #1f8a5e;
    --color-live-solid: #3fae7f;     --color-live-on: #0b0b0c;     --color-live-text: #6fcf9f;     --color-live-tint: #10241a;     --color-live-border: #1f4a33;
    --color-approval-solid: #f0a33a; --color-approval-on: #0b0b0c; --color-approval-text: #f5bd66; --color-approval-tint: #2a1d0b; --color-approval-border: #5a3d12;
    --color-agent-solid: #5b8def;    --color-agent-on: #0b0b0c;    --color-agent-text: #93b4f5;    --color-agent-tint: #0f1a33;    --color-agent-border: #24396b;
    --color-blocked-solid: #ef6b5f;  --color-blocked-on: #0b0b0c;  --color-blocked-text: #f59a90;  --color-blocked-tint: #2e1110;  --color-blocked-border: #5c211d;
    --color-audit-solid: #9b82ec;    --color-audit-on: #0b0b0c;    --color-audit-text: #bba9f3;    --color-audit-tint: #1c1533;    --color-audit-border: #3a2d6b;
    --color-pill-bg: var(--color-sunken);
    --color-dark-bg: #050506; --color-dark-bg-green: #050807; --color-dark-hairline: rgba(255, 255, 255, 0.07);
    --color-code-bg: #111114;
    --glow-live: radial-gradient(closest-side, rgb(63 174 127 / 0.22), rgb(63 174 127 / 0.06) 55%, transparent);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
    --shadow-card-tinted: 0 1px 2px rgb(0 0 0 / 0.5), 0 18px 40px -22px rgb(63 174 127 / 0.35);
    --selection-bg: #1f4a33;
    --chart-grid: #26262a; --chart-axis: #8b8b94;
    --shadow-chip: 0 1px 2px rgb(0 0 0 / 0.5);
    --color-overlay: rgb(0 0 0 / 0.6); --color-frost: rgb(11 11 12 / 0.94);
    --band-bg: var(--color-subtle); --band-rail: rgb(63 174 127 / 0.4);
    --demo-bg: #0f1a14;
  }
}
:root[data-theme="dark"] {
  --color-canvas: #0b0b0c; --color-subtle: #111113; --color-sunken: #18181b; --color-raised: #151517;
  --color-ink: #ededef; --color-ink-secondary: #b4b4bb; --color-ink-muted: #8b8b94;
  --color-border: #26262a; --color-border-strong: #3a3a40; --color-input-border: #6b6b74;
  --color-rail-hover: #1f8a5e;
  --color-live-solid: #3fae7f;     --color-live-on: #0b0b0c;     --color-live-text: #6fcf9f;     --color-live-tint: #10241a;     --color-live-border: #1f4a33;
  --color-approval-solid: #f0a33a; --color-approval-on: #0b0b0c; --color-approval-text: #f5bd66; --color-approval-tint: #2a1d0b; --color-approval-border: #5a3d12;
  --color-agent-solid: #5b8def;    --color-agent-on: #0b0b0c;    --color-agent-text: #93b4f5;    --color-agent-tint: #0f1a33;    --color-agent-border: #24396b;
  --color-blocked-solid: #ef6b5f;  --color-blocked-on: #0b0b0c;  --color-blocked-text: #f59a90;  --color-blocked-tint: #2e1110;  --color-blocked-border: #5c211d;
  --color-audit-solid: #9b82ec;    --color-audit-on: #0b0b0c;    --color-audit-text: #bba9f3;    --color-audit-tint: #1c1533;    --color-audit-border: #3a2d6b;
  --color-pill-bg: var(--color-sunken);
  --color-dark-bg: #050506; --color-dark-bg-green: #050807; --color-dark-hairline: rgba(255, 255, 255, 0.07);
  --color-code-bg: #111114;
  --glow-live: radial-gradient(closest-side, rgb(63 174 127 / 0.22), rgb(63 174 127 / 0.06) 55%, transparent);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --shadow-card-tinted: 0 1px 2px rgb(0 0 0 / 0.5), 0 18px 40px -22px rgb(63 174 127 / 0.35);
  --selection-bg: #1f4a33;
  --chart-grid: #26262a; --chart-axis: #8b8b94;
  --shadow-chip: 0 1px 2px rgb(0 0 0 / 0.5);
  --color-overlay: rgb(0 0 0 / 0.6); --color-frost: rgb(11 11 12 / 0.94);
  --band-bg: var(--color-subtle); --band-rail: rgb(63 174 127 / 0.4);
  --demo-bg: #0f1a14;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
::selection { background: var(--selection-bg); color: var(--color-ink); }

/* The hidden attribute must always win. v2 components set display (flex, grid,
 * inline-flex), which otherwise overrides the UA [hidden] rule and leaves
 * script-hidden controls visible (e.g. the operator-only currency toggle). */
[hidden] { display: none !important; }

/* v1 bridge: /workspace still loads /styles.css (v1 :root names). In dark, point those
 * names at the v3 dark tokens so legacy workspace rules follow the theme. Light is untouched. */
:root[data-theme="dark"] {
  --ink: var(--color-ink);
  --ink-soft: var(--color-ink-secondary);
  --paper: var(--color-canvas);
  --paper-light: var(--color-raised);
  --line: var(--color-border);
  --muted: var(--color-ink-muted);
  --signal: var(--color-live-solid);
  --signal-soft: var(--color-live-tint);
  --signal-deep: var(--color-live-text);
  --amber: var(--color-approval-solid);
  --coral: var(--color-blocked-solid);
  --blue: var(--color-agent-solid);
  --shadow: 0 20px 50px rgb(0 0 0 / 0.45);
}