/* ============ TwitterScale — design tokens ============ */
:root {
  color-scheme: light;
  /* surfaces */
  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --surface-2: #FBFCFD;
  --surface-hover: #F4F6F9;
  --border: #ECEEF2;
  --border-strong: #DCE0E7;

  /* text */
  --text: #0E1116;
  --text-2: #5B6472;
  --text-3: #939BA9;

  /* accent (blue) */
  --accent: #2563EB;
  --accent-strong: #1D4ED8;
  --accent-weak: #EEF3FF;
  --accent-weak-2: #DCE7FE;
  --accent-text: #1E50C8;

  /* status */
  --warmup: #D97706;        --warmup-bg: #FDF3E3;   --warmup-dot: #F59E0B;
  --cred: #7C3AED;          --cred-bg: #F2ECFD;     --cred-dot: #8B5CF6;
  --active: #16864B;        --active-bg: #E6F5EC;   --active-dot: #21A862;
  --danger: #D11A45;        --danger-bg: #FDEBEF;   --danger-dot: #E11D48;
  --paused: #6B7280;        --paused-bg: #F1F2F4;   --paused-dot: #9AA1AC;

  /* shadows — soft & diffuse */
  --shadow-xs: 0 1px 2px rgba(16,24,40,.04);
  --shadow-sm: 0 1px 3px rgba(16,24,40,.05), 0 1px 2px rgba(16,24,40,.03);
  --shadow-md: 0 6px 20px rgba(16,24,40,.07), 0 2px 6px rgba(16,24,40,.04);
  --shadow-lg: 0 16px 40px rgba(16,24,40,.13), 0 4px 12px rgba(16,24,40,.06);

  /* geometry — rounder */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* layout */
  --sidebar-w: 250px;
  --topbar-h: 64px;

  /* density (overridden by tweak) — airy default */
  --row-h: 56px;
  --pad: 24px;
  --gap: 22px;

  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

[data-density="compact"] {
  --row-h: 44px;
  --pad: 18px;
  --gap: 15px;
}

/* ============ DARK MODE ============ */
[data-theme="dark"] {
  color-scheme: dark;
  /* surfaces */
  --bg: #0E1116;
  --surface: #171A21;
  --surface-2: #1C2028;
  --surface-hover: #222732;
  --border: #272D38;
  --border-strong: #39414F;

  /* text */
  --text: #ECEFF3;
  --text-2: #A4ABB8;
  --text-3: #6F7886;

  /* accent (blue) — légèrement éclairci pour contraster sur fond sombre */
  --accent: #3B82F6;
  --accent-strong: #60A5FA;
  --accent-weak: #18243C;
  --accent-weak-2: #243454;
  --accent-text: #9DBBFF;

  /* status — texte éclairci, fonds assombris */
  --warmup: #F0AC4B;  --warmup-bg: #2A2113;  --warmup-dot: #F59E0B;
  --cred:   #B49BFB;  --cred-bg:   #221B36;  --cred-dot:   #8B5CF6;
  --active: #34D08A;  --active-bg: #12241C;  --active-dot: #21A862;
  --danger: #FB7185;  --danger-bg: #2C1721;  --danger-dot: #E11D48;
  --paused: #9AA1AC;  --paused-bg: #222732;  --paused-dot: #6B7280;

  /* shadows — plus denses sur fond sombre */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 20px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.5);
}

/* dark : corrections des couleurs codées en dur dans components.css */
[data-theme="dark"] .ts-btn-secondary:hover { border-color: var(--border-strong); }
[data-theme="dark"] .ts-btn-danger:hover { background: #3A1A24; }
[data-theme="dark"] .ts-toast { background: #2A2F3A; border: 1px solid var(--border); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3A4150; background-clip: content-box; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4A5260; background-clip: content-box; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: linear-gradient(var(--bg), var(--bg));
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#root { height: 100%; }

.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "cv01" 1; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: #D3D7DE; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #BCC2CC; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font-family: inherit; color: inherit; }
::selection { background: var(--accent-weak-2); }

/* utility */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.grow { flex: 1; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.96); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(225,29,72,.35); } 70% { box-shadow: 0 0 0 7px rgba(225,29,72,0); } 100% { box-shadow: 0 0 0 0 rgba(225,29,72,0); } }