/* TwentyOne Solutions brand tokens for the tools dashboard.
   Values mirror the LIVE BUSINESS WEBSITE exactly
   (twentyone-website/src/styles/global.css :root and .dark), converted from HSL:

     --background  40 33% 98%  -> #fdfaf5      --primary 36 100% 50% -> #FD9800
     --foreground   0  0% 20%  -> #333333      --card     0  0% 100% -> #ffffff
     --muted       40 20% 96%  -> #f6f4f0      --border   0  0% 90%  -> #e5e5e5
     dark: bg 0 0% 10% -> #1a1a1a, card 0 0% 15% -> #262626,
           fg 0 0% 95% -> #f2f2f2, muted 0 0% 20% -> #333333
     radius 0.6rem, Syne headings, Open Sans body.

   Loaded AFTER each page's own <style> so it is authoritative. Every historical
   alias the pages invented (--card-bg, --text-dark, --success, --danger, ...) maps
   to the same brand value so nothing has to be rewritten per page. */

:root {
  /* brand */
  --orange: #FD9800;          /* primary 36 100% 50% */
  --primary: #FD9800;         /* alias, some pages use --primary */
  --orange-hover: #e08600;
  --orange-light: #fff4e0;
  --slate: #5b6470;

  /* surfaces, from the site */
  --bg: #fdfaf5;              /* background 40 33% 98% */
  --card: #ffffff;            /* card 0 0% 100% */
  --card-bg: #ffffff;
  --border: #e5e5e5;          /* border 0 0% 90% */
  --gray-light: #f6f4f0;      /* muted 40 20% 96% */
  --accent: #f6f4f0;          /* accent 40 20% 96% */

  /* type, from the site */
  --text: #333333;            /* foreground 0 0% 20% */
  --text-dark: #333333;
  --text-body: #4d4d4d;
  --text-muted: #666666;      /* muted-foreground 0 0% 40% */
  --text-subtle: #8c8c8c;

  /* status. destructive matches the site (0 84.2% 60.2%) */
  --green: #10b981;
  --success: #10b981;
  --green-light: #d1fae5;
  --red: #ef4444;
  --danger: #ef4444;
  --red-light: #fee2e2;
  --yellow: #f59e0b;
  --warning: #f59e0b;
  --yellow-light: #fef3c7;
  --blue: #3b82f6;
  --info: #3b82f6;
  --blue-light: #dbeafe;
  --purple: #8b5cf6;
  --purple-light: #ede9fe;

  /* badge/pill tints: paired bg+fg so they stay legible in both themes */
  --tint-green-bg: #d1fae5;  --tint-green-fg: #065f46;
  --tint-amber-bg: #fef3c7;  --tint-amber-fg: #92400e;
  --tint-red-bg:   #fee2e2;  --tint-red-fg:   #991b1b;
  --tint-blue-bg:  #dbeafe;  --tint-blue-fg:  #1e40af;
  --tint-gray-bg:  #f3f4f6;  --tint-gray-fg:  #4d4d4d;

  /* channels */
  --ig: #E1306C;
  --fb: #1877F2;
  --nd: #8ED500;

  /* shape, radius 0.6rem from the site */
  --radius: 0.6rem;
  --radius-sm: 0.4rem;
  --shadow: 0 1px 2px rgba(51,51,51,.06), 0 1px 3px rgba(51,51,51,.08);
  --shadow-hover: 0 4px 12px rgba(51,51,51,.10), 0 2px 4px rgba(51,51,51,.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --orange: #FD9800;        /* primary is identical in the site's dark theme */
    --primary: #FD9800;
    --orange-hover: #ffab2e;
    --orange-light: #3a2408;
    --slate: #9aa3af;

    --bg: #1a1a1a;            /* dark background 0 0% 10% */
    --card: #262626;          /* dark card 0 0% 15% */
    --card-bg: #262626;
    --border: #333333;        /* dark muted 0 0% 20% doubles as the border */
    --gray-light: #333333;
    --accent: #333333;

    --text: #f2f2f2;          /* dark foreground 0 0% 95% */
    --text-dark: #f2f2f2;
    --text-body: #d9d9d9;
    --text-muted: #999999;    /* dark muted-foreground 0 0% 60% */
    --text-subtle: #737373;

    --green: #34d399;
    --success: #34d399;
    --green-light: #0d2f24;
    --red: #f87171;
    --danger: #f87171;
    --red-light: #3a1a1a;
    --yellow: #fbbf24;
    --warning: #fbbf24;
    --yellow-light: #3a2c0d;
    --blue: #60a5fa;
    --info: #60a5fa;
    --blue-light: #14243d;
    --purple: #a78bfa;
    --purple-light: #241b3d;

    --tint-green-bg: #0f3b2e;  --tint-green-fg: #6ee7b7;
    --tint-amber-bg: #402d0b;  --tint-amber-fg: #fcd34d;
    --tint-red-bg:   #45201f;  --tint-red-fg:   #fca5a5;
    --tint-blue-bg:  #16273f;  --tint-blue-fg:  #93c5fd;
    --tint-gray-bg:  #33363d;  --tint-gray-fg:  #c9cdd4;

    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
    --shadow-hover: 0 4px 12px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.4);
  }
}

/* Typography: Syne headings, Open Sans body, same as the site. */
body {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .page-title, .header-logo, .stat-value, .card-value, .metric-value {
  font-family: 'Syne', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}
h1, h2, h3, .page-title { color: var(--text); }

/* Surfaces pick up the warm palette instead of cool grays. */
thead th { background: var(--gray-light); color: var(--text-muted); }
tbody tr:hover { background: var(--orange-light); }

/* Form controls and neutral buttons follow the theme instead of defaulting to white. */
input, select, textarea {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}
input::placeholder, textarea::placeholder { color: var(--text-subtle); }
.filter-btn, .filter-tab { background: var(--card); color: var(--text-body); border-color: var(--border); }
.filter-btn:hover, .filter-tab:hover { background: var(--gray-light); }
.filter-btn.active, .filter-tab.active { background: var(--orange); color: #fff; border-color: var(--orange); }