/**
 * BrokerInABox shared design tokens (dashboard / reZEN palette).
 * Import this from every surface stylesheet so all modules match.
 */
:root {
  /* Surfaces */
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #f3f4f6;
  --surface-3: #f9fafb;
  --surface-dark: #14171c;
  --surface-dark-2: #1a1e25;

  /* Text */
  --text: #111827;
  --text-muted: #6b7280;
  --text-on-dark: #e8eaed;
  --text-muted-dark: #9ca3af;

  /* Borders */
  --border: #e5e7eb;
  --border-dark: #2a303c;

  /* Brand / accent */
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --accent-navy: #1e3a5f;
  --accent-soft: rgba(59, 130, 246, 0.14);
  --accent-soft-solid: #eff6ff;

  /* Status */
  --success: #22c55e;
  --success-soft: rgba(34, 197, 94, 0.12);
  --warning: #d97706;
  --warning-soft: rgba(217, 119, 6, 0.12);
  --danger: #dc2626;
  --danger-soft: rgba(220, 38, 38, 0.1);

  /* Layout */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 14px;
  --font: "DM Sans", system-ui, -apple-system, sans-serif;
  --shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
  --shadow-lg: 0 20px 50px rgba(17, 24, 39, 0.12);
  --landing-max: 1180px;

  /* Left rail (site-nav) — keep in sync with site-nav.css */
  --site-rail-w: 228px;
  --site-rail-bg: #0b0d10;
  --site-rail-hover: #161a20;
  --site-rail-active: #1e2430;
  --site-rail-border: #1f2430;
  --site-rail-text: #c8cdd6;
  --site-rail-muted: #7a8291;
  --site-rail-icon: #9aa3b2;

  /* Legacy aliases used across portal / admin CSS */
  --card: var(--surface);
  --muted: var(--text-muted);
  --line: var(--border);
  --green: var(--success);
  --green-bg: var(--success-soft);
  --red: var(--danger);
  --red-bg: var(--danger-soft);
  --amber: var(--warning);
  --amber-bg: var(--warning-soft);
}

/* App-wide baseline so every page inherits the same chrome even if a
   feature sheet hardcodes less carefully. Feature CSS still wins on
   specificity for local components. */
html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  overflow-x: clip;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Mobile-friendly defaults */
button,
.btn,
input,
select,
textarea {
  touch-action: manipulation;
}

a {
  color: var(--accent);
}

/* Common card/panel chrome when feature sheets use plain elements */
.card,
.panel,
.box,
.wrap > section,
.admin-panel,
.dash-panel {
  color: var(--text);
}

input,
select,
textarea,
button {
  font-family: inherit;
}