/* Sofala Trade — design tokens (v1.0, 2026-10-17). Source of truth: docs/DESIGN.md §2 */
:root {
  /* brand */
  --navy: #023373;
  --navy-deep: #0B1B33;
  --navy-mid: #1E4A85;
  --wave: #007DDE;
  --link: #005FAD;
  --sky: #8FC3F2;
  --tint: #E3F0FB;

  /* surfaces */
  --surface-0: #FFFFFF;
  --surface-1: #F7F9FC;
  --surface-2: #F4F8FD;
  --surface-ops: #F3F5F8;

  /* text */
  --ink: #13203A;
  --ink-2: #34404F;
  --ink-3: #4B5566;
  --ink-4: #6B7280;
  --on-navy: #FFFFFF;
  --on-navy-2: #C7D7EC;

  /* lines */
  --line: #E6EBF2;
  --line-2: #F0F3F7;
  --line-input: #C9D6E6;
  --line-on-navy: #3D6297;

  /* status */
  --success: #1F7A4D;      --success-bg: #E6F4EC;   --success-line: #CFE0D7;
  --warn: #B45309;         --warn-bg: #FDF3DA;      --warn-ink: #7A5906;
  --danger: #B91C1C;       --danger-bg: #FBE7E7;
  --todo-ring: #D5DDE8;

  /* supplier tiers */
  --gold: #8A6508;         --gold-ink: #7A5906;     --gold-bg: #FDF8EC;
  --silver: #5A6472;       --silver-ink: #4A5462;
  --bronze: #8B4A22;

  /* type */
  --font: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-brand: "Outfit", ui-sans-serif, system-ui, sans-serif; /* wordmark only, matches the logo lettering */
  --fs-hero: clamp(34px, 4.2vw, 52px);
  --fs-h2: 32px;
  --fs-h3: 20px;
  --fs-title: 20px;
  --fs-body: 15px;
  --fs-body-lg: 16px;
  --fs-label: 14px;
  --fs-caption: 13px;
  --lh-body: 1.5;

  /* shape */
  --r-btn: 10px;
  --r-input: 10px;
  --r-card: 14px;
  --r-card-lg: 16px;
  --r-panel: 20px;
  --r-pill: 99px;

  /* space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px;
  --content-max: 1200px;
  --gutter: 24px;

  /* elevation (hero cards only) */
  --shadow-hero: 0 24px 48px rgba(2, 51, 115, 0.10);
  --shadow-card: 0 16px 40px rgba(2, 51, 115, 0.08);

  /* controls */
  --control-h: 46px;      /* app inputs/buttons */
  --control-h-web: 42px;
  --control-h-ops: 36px;
  --touch-min: 44px;
}

body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--surface-0); }
a { color: var(--link); } a:hover { color: var(--navy); }
.num { font-variant-numeric: tabular-nums; }