/* THE ONE SET OF DESIGN TOKENS.
 *
 * Karol 2026-08-25: *"all styled the same way as the table and not made you dark themes etc"*.
 *
 * The login page was written with its own palette copied from memory -- a different blue, a different
 * rule, no display face, and a prefers-color-scheme block nobody asked for, so the first screen a buyer
 * saw was the only one in the product that changed colour.
 *
 * These values are the app's, from resources/app/src/index.css. Blade views link this file; the React app
 * defines the same names in its own bundle. A changed token goes in BOTH -- weaker than a build step,
 * stronger than two sets of numbers drifting in silence.
 *
 * NO DARK BLOCK. The product is a light specification table and every screen belongs to it.
 */
:root {
  /* surfaces */
  --canvas: #F6F7F9;
  --surface: #FFFFFF;
  --surface-alt: #FBFBFC;
  --rule: #E4E7EC;
  --rule-strong: #CFD4DD;

  /* text */
  --ink: #141821;
  --ink-mid: #3F4655;
  --ink-soft: #6B7280;

  /* interaction */
  --accent: #2551E8;
  --accent-soft: #EDF1FE;
  --accent-press: #1B3FBF;

  /* the flag */
  --flag: #C2317A;

  /* tag palette */
  --tag-eco-bg: #E7F5EC;
  --tag-eco-tx: #16794A;
  --tag-fsc-bg: #E6F3F1;
  --tag-fsc-tx: #0F6E62;

  --tag-uv-bg: #FBF0DC;
  --tag-uv-tx: #8A5A16;
  --tag-foil-bg: #FAEBE2;
  --tag-foil-tx: #96461C;

  --tag-fast-bg: #E8EEFC;
  --tag-fast-tx: #2A4BB8;
  --tag-mid-bg: #EEF0F4;
  --tag-mid-tx: #4B5468;
  --tag-slow-bg: #F3F4F6;
  --tag-slow-tx: #6B7280;

  /* supplier colors */
  --sup-moo: #C2317A;
  --sup-tradeprint: #0F6E62;
  --sup-vistaprint: #6B4EE6;
}
body {
  background-color: var(--canvas);
  color: var(--ink);
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
.font-display { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 600; letter-spacing: -0.02em; }
.font-mono-figure { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }