/* TenderRadar — Design tokens
   Enterprise AWS-like, dense, dark by default, light supported. */

:root {
  /* Brand palettes — set by tweaks */
  --accent: #ff9900;          /* AWS orange */
  --accent-soft: #ffb44d;
  --accent-deep: #cc7a00;
  --signal: #00d4ff;          /* secondary signal */

  /* Status */
  --ok: #2ecc71;
  --warn: #f5c518;
  --danger: #ff4d6d;
  --info: #4ea0ff;

  /* Score buckets */
  --score-hot: #ff4d6d;
  --score-strong: #ff9900;
  --score-good: #ffd166;
  --score-fair: #4ea0ff;
  --score-weak: #6b7488;

  /* Surfaces — dark */
  --bg-0: #0a0f1c;            /* page */
  --bg-1: #0e1525;            /* panel */
  --bg-2: #131c2f;            /* raised */
  --bg-3: #1a2540;            /* hover/active */
  --bg-4: #243152;            /* line / chip */
  --bg-overlay: rgba(7, 11, 22, 0.78);

  /* Borders */
  --line: rgba(255,255,255,0.07);
  --line-strong: rgba(255,255,255,0.14);

  /* Text */
  --text-hi: #f1f5fb;
  --text: #c8d2e3;
  --text-mute: #8893ab;
  --text-faint: #5e6884;

  /* Radius */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* Shadow */
  --shadow-md: 0 4px 24px rgba(0,0,0,0.32);
  --shadow-lg: 0 14px 48px rgba(0,0,0,0.5);

  /* Density */
  --row-h: 44px;
  --pad-x: 20px;
  --pad-y: 16px;
  --sidebar-w: 232px;

  /* Type */
  --font-sans: "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
}

:root[data-theme="light"] {
  --bg-0: #f5f7fb;
  --bg-1: #ffffff;
  --bg-2: #ffffff;
  --bg-3: #eef2f8;
  --bg-4: #dde4ef;
  --bg-overlay: rgba(255,255,255,0.85);
  --line: rgba(10,15,28,0.08);
  --line-strong: rgba(10,15,28,0.16);
  --text-hi: #0a0f1c;
  --text: #2c3852;
  --text-mute: #5d6a85;
  --text-faint: #8a96b0;
  --shadow-md: 0 4px 18px rgba(8,18,40,0.08);
  --shadow-lg: 0 16px 40px rgba(8,18,40,0.14);
}

/* Tweakable palettes — override --accent etc via [data-palette] */
:root[data-palette="aws"]      { --accent: #ff9900; --accent-soft: #ffb44d; --accent-deep: #cc7a00; --signal: #00d4ff; }
:root[data-palette="navy"]     { --accent: #4ea0ff; --accent-soft: #80bfff; --accent-deep: #1f6fd4; --signal: #b69dff; }
:root[data-palette="emerald"]  { --accent: #2ecc71; --accent-soft: #7fe1a5; --accent-deep: #1f9c54; --signal: #ffcc4e; }
:root[data-palette="violet"]   { --accent: #b69dff; --accent-soft: #d3c5ff; --accent-deep: #7d5cff; --signal: #ff7ab8; }

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.45;
  font-feature-settings: "ss01", "cv11", "tnum";
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 10px; border: 2px solid var(--bg-0); }
::-webkit-scrollbar-track { background: transparent; }

/* Utility primitives */
.tr-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.tr-card-raised {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.tr-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11.5px; color: var(--text);
  white-space: nowrap;
}
.tr-chip-mono { font-family: var(--font-mono); letter-spacing: -0.02em; }
.tr-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500;
}
.tr-divider { height: 1px; background: var(--line); }
.tr-vdiv { width: 1px; background: var(--line); align-self: stretch; }
.tr-kbd {
  font-family: var(--font-mono); font-size: 10.5px;
  background: var(--bg-3); border: 1px solid var(--line);
  padding: 1px 5px; border-radius: 4px; color: var(--text-mute);
}
.tr-mono { font-family: var(--font-mono); letter-spacing: -0.02em; }
.tr-tabular { font-variant-numeric: tabular-nums; }

.tr-grid-bg {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 24px 24px;
}

.tr-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px; border-radius: var(--r-sm);
  background: var(--bg-3); border: 1px solid var(--line);
  color: var(--text-hi); font-weight: 500; font-size: 12.5px;
  transition: background .12s ease, border-color .12s ease;
}
.tr-btn:hover { background: var(--bg-4); border-color: var(--line-strong); }
.tr-btn-primary {
  background: var(--accent); color: #1b1200; border-color: transparent;
}
.tr-btn-primary:hover { background: var(--accent-soft); }
.tr-btn-ghost { background: transparent; border-color: transparent; color: var(--text-mute); }
.tr-btn-ghost:hover { color: var(--text-hi); background: var(--bg-3); }

.tr-input {
  height: 32px; padding: 0 10px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--text-hi);
  font-size: 12.5px;
  outline: none;
}
.tr-input:focus { border-color: var(--accent); }

/* Animations */
@keyframes tr-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes tr-scan { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes tr-sweep { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes tr-blip { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }
@keyframes tr-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }