/* ============================================================================
   Wabel · One Source — single source-of-truth design system
   ----------------------------------------------------------------------------
   THE one place colors, fonts, gradients, shadows, radii, motion and the
   per-tool tint are defined. Every surface of the product sources from here:

     • Hub shell ............ templates/shell.html         (<link>)
     • In-process tools ..... templates/_layout.html       (<link>)
                              (hub, cards, slack, outreach all {% extends %} it)
     • Supplier Scoring ..... scoring/public/index.html    (values mirrored —
                              separate :8001 origin, kept self-contained)
     • Bulk / Outreach ...... bulk/templates/base.html     (values mirrored —
                              separate :5002 origin, kept self-contained)

   Brand: Wabel blue #0079C1.
   Type system (the parts people read vs. notice):
     • Display / brand / headings ... Space Grotesk  (--display)  — characterful,
       clearly *designed*; used on the rail brand, page titles, big numbers.
     • UI / body text .............. Figtree        (--font)     — warm humanist
       sans, legible everywhere the eye lives (deliberately NOT Inter/DM Sans,
       which read as generic "AI" — see design memory).
     • Labels / badges / numbers ... Space Mono     (--mono)     — the "precise
       instrument" voice; pairs natively with Space Grotesk.
   Motion is Canva/Figma-calm — branded gradient shift, smooth eases, no AI blobs.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Figtree:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ── Surfaces ── */
  --bg: #eef3f9;
  --bg-tint: #e8eef7;
  --paper: #ffffff;
  --paper-2: #f5f8fc;
  --surface3: #e8eef7;
  --sidebar: #12305c;
  --sidebar-2: #0d2547;

  /* ── Ink / text ── */
  --ink: #0f1f3d;
  --ink-2: #1a3a6b;
  --muted: #4a5d80;
  --muted-2: #8fa0be;
  --line: rgba(26,58,107,.1);
  --line-2: rgba(26,58,107,.18);

  /* ── Brand (Wabel blue) ── */
  --brand: #0079c1;
  --brand-soft: #d6ecfb;
  --brand-2: #015e9b;
  --brand-3: #00a8d6;

  /* ── Semantic accents ── */
  --accent: #0d9488;     --accent-soft: #ccfbf1;
  --good: #16a34a;       --good-soft: #dcfce7;   --good-text: #15803d;
  --warn: #d97706;       --warn-soft: #fef3c7;
  --bad: #dc2626;        --bad-soft: #fee2e2;
  /* Text-on-soft variants. #dc2626 on #fee2e2 is 3.95:1 — under the 4.5:1
     floor for small text, and these carry STATUS ("Duplicate · nothing will
     be created"), which is the last thing that should be hard to read. The
     darker shade is text-only; borders and buttons keep --bad. */
  --bad-text: #a91b1b;   --warn-text: #92600a;
  --info: #0079c1;       --info-soft: #d6ecfb;
  --shared: #7c3aed;     --shared-soft: #ede9fe;

  /* ── Shape ── */
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 20px;

  /* ── Type ── */
  --font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Space Grotesk', 'Figtree', -apple-system, sans-serif;
  --mono: 'Space Mono', ui-monospace, Menlo, monospace;

  /* ── Elevation / glass ── */
  --shadow: 0 1px 2px rgba(20,44,84,.05), 0 12px 32px -16px rgba(20,44,84,.16);
  --shadow-lg: 0 8px 16px rgba(20,44,84,.08), 0 36px 64px -24px rgba(20,44,84,.30);
  --glass: rgba(255,255,255,.62);
  --glass-2: rgba(255,255,255,.82);
  --glass-border: rgba(255,255,255,.85);
  --glass-blur: saturate(160%) blur(20px);

  /* ── Brand gradients (single shared definition) ── */
  --grad-brand: linear-gradient(120deg, #00a8d6 0%, #0079c1 48%, #1255a0 100%);
  --grad-hero: linear-gradient(115deg, #015e9b 0%, #0079c1 38%, #00a8d6 100%);

  /* ── Motion ── */
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* ── Shell structure ── */
  --sidebar-w: 256px;
  --sidebar-w-collapsed: 76px;
  --rail-w: 72px;          /* slim icon rail (VS Code / Linear / Slack pattern) */
  --topbar-h: 60px;

  /* ── Per-tool theme (live-set by the shell). Base is brand blue for EVERY
       tool so the product reads as one — only --tool-tint varies subtly. ── */
  --tool-accent: #0079c1;
  --tool-accent-2: #00a8d6;
  --tool-soft: #d6ecfb;
  --tool-grad: linear-gradient(120deg, #00a8d6 0%, #0079c1 48%, #1255a0 100%);
  --tool-glow: rgba(0,168,214,.5);
  --tool-tint: #0079c1;   /* subtle per-feature hue: topbar hairline + active nav bar */
}

/* Dark theme removed entirely (2026-06-07) — One Source is light-only now. */

/* ── Base reset / type ──────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--brand-soft); color: var(--ink); }

/* ── Shared smooth, branded motion (Canva/Figma-calm) ───────────────────────
   A slow gradient shift any brand surface can opt into via `.grad-shift`,
   plus the shine sweep used on primary buttons / the brand mark. ── */
@keyframes wabel-grad-shift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.grad-shift { background-size: 200% 200%; animation: wabel-grad-shift 9s var(--ease) infinite; }
@keyframes wabel-shine { 0%,62% { left: -120%; } 80%,100% { left: 160%; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}