/* base.css — The Parleo Scan · shared tokens + primitives
   Recreated from agent_commerce_design/exports/design_handoff_parleo_scan (the binding visual contract).
   Fonts are self-hosted: Inter Tight + JetBrains Mono (variable, from the design bundle),
   Instrument Serif 400 regular + italic (latin subset, self-hosted per handoff note). */

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/intertight.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/assets/fonts/jbmono.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrumentserif.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrumentserif-italic.woff2') format('woff2');
}

:root {
  /* canvas + surfaces */
  --canvas: #F2F0EF;
  --canvas-2: #EAE8E5;
  --surface: #FFFFFF;
  --surface-warm: #FBFAF9;
  --surface-alt: #F9F7F5;
  --surface-alt-2: #FAF8F6;
  --panel-bg-warm: #F7F5F3;
  --pill-bg-warm: #F1EEEB;

  /* ink + text */
  --ink: #1E1E2E;
  --ink-hover: #14141F;
  --text: #2E2D40;
  --text-alt: #464555;
  --text-strong: #2B2A38;
  --muted: #6F6D7A;
  --faint: #8C8B97;
  --faint-2: #9B99A6;
  --reg: #C9C4BE;
  --reg-2: #C3C1CB;

  /* borders */
  --border: #E5E2DD;
  --border-alt: #D8D4D0;
  --border-soft: #E9E5E2;
  --border-grid: #EFECEA;

  /* accent */
  --blue: #0166FF;
  --blue-hover: #0157D8;
  --blue-tint: #EBF2FF;
  --blue-border: #C9DBFF;

  /* status */
  --green: #1E7F4F;
  --green-dark: #4CAE7E;
  --amber: #A16A00;
  --amber-dark: #D9A441;
  --red: #C2452D;
  --red-dark: #E07856;

  /* dark panel text */
  --d-bright: #F5F3F7;
  --d-body: #E8E6F0;
  --d-emph: #D5D3E0;
  --d-muted: #B9B7C6;
  --d-muted-2: #A9A7BA;
  --d-muted-3: #A6A4B5;
  --d-faint: #8F8DA0;
  --d-dim: #75738A;
  --d-hairline: rgba(242, 240, 239, 0.14);
  --d-reg: rgba(242, 240, 239, 0.32);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --font-ui: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-serif: 'Instrument Serif', Georgia, serif;
}

* { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--canvas);
  font-family: var(--font-ui);
  font-feature-settings: "ss01", "cv11";
  color: var(--text-alt);
}

a { color: var(--text-alt); }
a:hover { color: var(--ink); }
input::placeholder { color: var(--faint); }
button { font-family: var(--font-ui); }

.tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.serif {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
}

/* corner-anchor eyebrow: 28px line + mono/upper label (+ optional blue dot) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--reg-2);
}
.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  display: inline-block;
}

/* registration crosshairs: 9x9 corner brackets on panels */
.reg-marks { position: relative; }
.reg-marks > .rm {
  position: absolute;
  width: 9px;
  height: 9px;
  pointer-events: none;
}
.reg-marks > .rm::before,
.reg-marks > .rm::after {
  content: "";
  position: absolute;
  background: var(--reg);
}
.reg-marks.on-dark > .rm::before,
.reg-marks.on-dark > .rm::after { background: var(--d-reg); }
.reg-marks > .rm::before { left: 4px; top: 0; width: 1px; height: 9px; }
.reg-marks > .rm::after { top: 4px; left: 0; width: 9px; height: 1px; }
.reg-marks > .rm.tl { top: -5px; left: -5px; }
.reg-marks > .rm.tr { top: -5px; right: -5px; }
.reg-marks > .rm.bl { bottom: -5px; left: -5px; }
.reg-marks > .rm.br { bottom: -5px; right: -5px; }