/* B-side shared design tokens — copied identically into bside-universe, bside-hunter,
   bside-market-research, bside-settings, bside-client-onboarding, bside-communication-hub,
   and every future B-side application. Edit in one place, then re-sync the others.
   Flat/architectural system: single accent (no second hue), soft radius, hard elevation. */

:root {
  /* ---- core ---- */
  --bg: #f3f2f2;
  --surface: #ffffff;
  --ink: #201e1d;
  --accent: #d3af3c;
  --on-accent: var(--ink); /* text color for solid-accent fills - gold needs dark text, not white */

  /* ---- ink ramp (neutral greys, anchored on --ink) ---- */
  --ink-100: #f3f2f2;
  --ink-200: #e3e1e0;
  --ink-300: #c9c6c4;
  --ink-400: #a7a3a0;
  --ink-500: #86817d;
  --ink-600: #66615d;
  --ink-700: #4a4643;
  --ink-800: #302d2b;
  --ink-900: #201e1d;

  /* ---- accent ramp (the ONLY hue in the system) ---- */
  --accent-100: #fbf1da;
  --accent-200: #f4e7cf;
  --accent-300: #ead9ae;
  --accent-400: #ddc574;
  --accent-500: #d3af3c;
  --accent-600: #b8962e;
  /* 700-900 are the text shades on white/light fills. Pulled warmer (bronze, hue ~39deg) than a
     straight darkening of the gold, which drifts olive and reads as a muddy green on white.
     Contrast on #fff: 700 = 5.4:1, 800 = 8:1 (both pass WCAG AA for body text). */
  --accent-700: #8e6414;
  --accent-800: #6e4a0e;
  --accent-900: #4a320a;

  /* ---- danger (form/validation error state, destructive actions). The system is otherwise
     single-accent by design (see file header) - this is the one deliberate second hue, used only
     for "this failed" / "this deletes something" signals, never decoration. Same #c0392b already
     used ad hoc in a couple of apps (Hunter's "changed" badge, Active Matches' delete button)
     before this existed as a real token - formalized here since form error states now need it
     fleet-wide too. */
  --danger: #c0392b;
  --danger-100: #fbeae7;
  --danger-700: #922a1f;

  /* ---- theme-invariant swatch: always this exact dark value regardless of light/dark mode.
     For "solid dark chip, light text" components (tooltips, toasts, active-state pills, icon
     badges) that should look the same in both themes rather than inverting with --ink. Never
     redefined below - if you're tempted to theme it, you want --ink instead. */
  --ink-solid: #201e1d;

  /* ---- spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- type ---- */
  --font-heading: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;

  /* ---- shape ---- */
  --radius: 10px;
  --border-hairline: 1px;
  --border-rule: 2px;

  /* ---- elevation: hard offset shadows, no blur ---- */
  --shadow-sm: 2px 2px 0 rgba(32, 30, 29, 0.14);
  --shadow-md: 4px 4px 0 rgba(32, 30, 29, 0.18);
  --shadow-lg: 8px 8px 0 rgba(32, 30, 29, 0.22);

  /* ---- nav ---- */
  --nav-height: 64px;
}

/* ---- dark mode: an explicit per-user account setting (see bside-settings), never
   prefers-color-scheme - applied by each app's own JS setting data-theme="dark" on <html>
   once it knows the signed-in user's saved preference. Every value below is a redefinition of
   a token already declared above; nothing above this block changes, so light mode (the
   default, and every currently signed-out/unset case) is completely unaffected.
   Every ink-N/accent-N role keeps its NAME but the ramp direction flips (ink-100 is a "light
   fill" role in light mode, so in dark mode it resolves to a dark fill instead) - this is what
   lets every existing component that already uses these tokens render correctly in dark mode
   with zero changes to components.css or any app's own styles.css. All text/background pairs
   below were checked against WCAG 2.1 contrast minimums (4.5:1 text, 3:1 UI boundaries) - see
   the component list in each app's dark-mode commit for the exact ratios. */
[data-theme="dark"] {
  --bg: #181615;
  --surface: #221f1d;
  --ink: #f2ece5;
  --on-accent: #201e1d; /* fixed - the gold accent stays equally light in both themes, so its text must stay dark in both too */

  --ink-100: #211e1c;
  --ink-200: #35312d;
  --ink-300: #746c65;
  --ink-400: #8a8179;
  --ink-500: #9a9189;
  --ink-600: #b8afa6;
  --ink-700: #cec5bb;
  --ink-800: #e3dbd2;
  --ink-900: #f2ece5;

  --accent-100: #332912;
  --accent-200: #3f331a;
  --accent-300: #8a7439;
  --accent-400: #b89a4f;
  /* --accent/--accent-500 and --accent-600 stay the same gold in both themes - already checked
     against a fixed --on-accent above, so no dark redefinition needed for either. */
  --accent-700: #e8c869;
  --accent-800: #f0d788;
  --accent-900: #f7e6ae;

  --shadow-sm: 2px 2px 0 rgba(0, 0, 0, 0.45);
  --shadow-md: 4px 4px 0 rgba(0, 0, 0, 0.5);
  --shadow-lg: 8px 8px 0 rgba(0, 0, 0, 0.55);

  --danger: #e0584a;
  --danger-100: #3a211d;
  --danger-700: #f0897d;
}