/* Amsel design system — tokens + Button/Input component styles (from _ds bundle) */
/* ============================================================
   AMSEL COLOR TOKENS
   Blackbird ink + warm paper + signal amber (the beak).
   Verdicts are the only saturated colors in product UI.
   ============================================================ */
:root {
  /* ---- Ink (warm near-black plumage scale) ---- */
  --ink-950: #131110;
  --ink-900: #1C1917;
  --ink-800: #292522;
  --ink-700: #3D3833;
  --ink-600: #57504A;
  --ink-500: #6F675F;
  --ink-400: #8D847B;
  --ink-300: #B3A99F;
  --ink-200: #D4CCC3;
  --ink-100: #E8E2DA;
  --ink-050: #F1EDE7;

  /* ---- Paper (warm whites) ---- */
  --paper-0: #FFFFFF;
  --paper-1: #FBF9F6;
  --paper-2: #F5F1EB;

  /* ---- Amber (signal / beak) ---- */
  --amber-600: #B96A0A;
  --amber-500: #E08A0C;
  --amber-400: #F0A028;
  --amber-300: #F6BE66;
  --amber-100: #FBEBD2;

  /* ---- Verdict: allow ---- */
  --allow-600: #1D7A4C;
  --allow-500: #23915B;
  --allow-100: #D9EDE2;

  /* ---- Verdict: monitor (leans on amber) ---- */
  --monitor-600: #A35E06;
  --monitor-500: #CB7D0B;
  --monitor-100: #F9E8CB;

  /* ---- Verdict: block ---- */
  --block-600: #A93226;
  --block-500: #C2402F;
  --block-100: #F6DCD6;

  /* ---- Semantic: text ---- */
  --text-display: var(--ink-950);
  --text-body: var(--ink-800);
  --text-secondary: var(--ink-500);
  --text-tertiary: var(--ink-400);
  --text-inverse: var(--paper-1);
  --text-link: var(--amber-600);

  /* ---- Semantic: surfaces ---- */
  --surface-page: var(--paper-1);
  --surface-card: var(--paper-0);
  --surface-sunken: var(--paper-2);
  --surface-ink: var(--ink-900);       /* dark panels, marketing bands */
  --surface-ink-raised: var(--ink-800);

  /* ---- Semantic: borders ---- */
  --border-hairline: var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong: var(--ink-950);
  --border-on-ink: rgba(251, 249, 246, 0.16);

  /* ---- Semantic: interactive ---- */
  --action-primary-bg: var(--ink-950);
  --action-primary-bg-hover: var(--ink-700);
  --action-primary-fg: var(--paper-1);
  --accent: var(--amber-500);
  --accent-strong: var(--amber-600);
  --focus-ring: var(--amber-500);

  /* ---- Semantic: verdict aliases ---- */
  --verdict-allow: var(--allow-600);
  --verdict-allow-bg: var(--allow-100);
  --verdict-monitor: var(--monitor-600);
  --verdict-monitor-bg: var(--monitor-100);
  --verdict-block: var(--block-600);
  --verdict-block-bg: var(--block-100);
}
/* ============================================================
   AMSEL TYPOGRAPHY TOKENS
   Archivo carries voice (expanded for display); IBM Plex Mono
   carries evidence (scores, signals, verdicts, API).
   ============================================================ */
:root {
  --font-sans: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* Display = Archivo pushed wide */
  --display-stretch: 118%;
  --display-weight: 700;

  /* ---- Scale (px) ---- */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 44px;
  --text-4xl: 64px;

  /* ---- Composite styles ---- */
  --style-display: var(--display-weight) var(--text-4xl)/1.02 var(--font-sans);
  --style-h1: var(--display-weight) var(--text-3xl)/1.06 var(--font-sans);
  --style-h2: var(--display-weight) var(--text-2xl)/1.12 var(--font-sans);
  --style-h3: 600 var(--text-xl)/1.2 var(--font-sans);
  --style-h4: 600 var(--text-lg)/1.3 var(--font-sans);
  --style-body: 400 var(--text-md)/1.55 var(--font-sans);
  --style-body-strong: 600 var(--text-md)/1.55 var(--font-sans);
  --style-ui: 500 var(--text-sm)/1.4 var(--font-sans);
  --style-caption: 400 var(--text-xs)/1.45 var(--font-sans);
  --style-data: 500 var(--text-sm)/1.4 var(--font-mono);
  --style-data-lg: 600 var(--text-xl)/1.1 var(--font-mono);
  --style-label: 600 var(--text-2xs)/1.2 var(--font-mono);

  /* Mono labels are always uppercase + tracked */
  --label-tracking: 0.08em;
  --display-tracking: -0.015em;
}

/* Base document defaults */
body {
  font: var(--style-body);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { color: var(--text-display); margin: 0; }
h1, h2 { font-stretch: var(--display-stretch); letter-spacing: var(--display-tracking); }
a { color: var(--text-link); text-decoration-color: var(--amber-300); text-underline-offset: 2px; }
a:hover { color: var(--amber-500); }
/* ============================================================
   AMSEL SPACING / RADII / SIZING TOKENS — 4px base grid
   ============================================================ */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radii — crisp, small. Amsel is never bubbly. */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* Control heights */
  --control-sm: 28px;
  --control-md: 36px;
  --control-lg: 44px;

  /* Layout */
  --page-max: 1200px;
  --sidebar-w: 232px;
}
/* ============================================================
   AMSEL EFFECTS — shadows, focus, motion, scan motif
   ============================================================ */
:root {
  /* Shadows: tight and ink-tinted; used sparingly (menus, dialogs). */
  --shadow-card: 0 1px 2px rgba(19, 17, 16, 0.06);
  --shadow-raised: 0 2px 6px rgba(19, 17, 16, 0.08), 0 1px 2px rgba(19, 17, 16, 0.06);
  --shadow-overlay: 0 12px 32px rgba(19, 17, 16, 0.18), 0 2px 8px rgba(19, 17, 16, 0.10);

  /* Focus */
  --focus-shadow: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--focus-ring);

  /* Motion: quick, decisive. No bounce. */
  --ease-out: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 180ms; /* @kind other */
  --dur-slow: 280ms; /* @kind other */

  /* Scrim */
  --scrim: rgba(19, 17, 16, 0.44);
}

/* Scan brackets — Amsel's ownable motif (viewfinder corners).
   Apply .am-scan to a relatively-positioned box. */
.am-scan { position: relative; }
.am-scan::before, .am-scan::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
}
.am-scan::before { top: 0; left: 0; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.am-scan::after { bottom: 0; right: 0; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); }

/* ---- Button (components/actions/Button.jsx) ---- */
.am-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--radius-md); font-family: var(--font-sans);
  font-weight: 500; cursor: pointer; white-space: nowrap; user-select: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.am-btn:focus-visible { outline: none; box-shadow: var(--focus-shadow); }
.am-btn--sm { height: var(--control-sm); padding: 0 10px; font-size: 12px; }
.am-btn--md { height: var(--control-md); padding: 0 14px; font-size: 13px; }
.am-btn--lg { height: var(--control-lg); padding: 0 18px; font-size: 14px; }
.am-btn--primary { background: var(--action-primary-bg); color: var(--action-primary-fg); }
.am-btn--primary:hover { background: var(--action-primary-bg-hover); }
.am-btn--primary:active { background: var(--ink-800); }
.am-btn--secondary { background: var(--surface-card); border-color: var(--border-default); color: var(--text-body); }
.am-btn--secondary:hover { background: var(--surface-sunken); }
.am-btn--secondary:active { background: var(--ink-100); }
.am-btn--ghost { background: transparent; color: var(--text-body); }
.am-btn--ghost:hover { background: var(--surface-sunken); }
.am-btn--ghost:active { background: var(--ink-100); }
.am-btn--destructive { background: var(--block-600); color: var(--paper-1); }
.am-btn--destructive:hover { background: var(--block-500); }
.am-btn--destructive:active { background: var(--block-600); }
.am-btn:disabled { background: var(--ink-050); border-color: transparent; color: var(--ink-300); cursor: default; }
.am-btn svg { width: 15px; height: 15px; flex: none; }
/* ---- Input (components/forms/Input.jsx) ---- */
.am-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sans); }
.am-field__label { font: var(--style-label); font-family: var(--font-mono); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--text-secondary); }
.am-field__box { display: flex; align-items: center; gap: 8px; background: var(--surface-card);
  border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 0 10px;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.am-field__box:focus-within { border-color: var(--ink-950); box-shadow: var(--focus-shadow); }
.am-field__box--error { border-color: var(--block-500); }
.am-field__input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font-family: var(--font-sans); font-size: 13px; color: var(--text-body); }
.am-field__input::placeholder { color: var(--text-tertiary); }
.am-field__input--mono { font-family: var(--font-mono); }
.am-field__box--sm { height: var(--control-sm); } .am-field__box--md { height: var(--control-md); } .am-field__box--lg { height: var(--control-lg); }
.am-field__affix { color: var(--ink-400); display: inline-flex; align-items: center; font-size: 12px; font-family: var(--font-mono); }
.am-field__msg { font: var(--style-caption); color: var(--text-secondary); }
.am-field__msg--error { color: var(--block-600); }
.am-field--disabled .am-field__box { background: var(--surface-sunken); }
.am-field--disabled .am-field__input { color: var(--text-tertiary); }