/* ============================================================
   Tempro-Corp — design tokens & base
   Dark "régie/console", accent vert + cyan, mono pour la data
   ============================================================ */
:root {
  /* surfaces — bleu nuit */
  --bg:        #0a0d14;
  --bg-2:      #0e121c;
  --surface:   #121826;
  --surface-2: #171f30;
  --surface-3: #1d2740;
  --border:    #232c42;
  --border-2:  #2c3754;

  /* texte */
  --text:   #e8ebf2;
  --muted:  #93a0bb;
  --faint:  #5f6c89;

  /* accents */
  --accent:      #00e08a;   /* vert — actif / online / primary */
  --accent-2:    #22d3ee;   /* cyan — info / secondary */
  --accent-soft: rgba(0,224,138,.12);
  --accent-line: rgba(0,224,138,.30);
  --cyan-soft:   rgba(34,211,238,.12);

  /* statuts */
  --online:  #00e08a;
  --busy:    #f5b942;
  --locked:  #8b94a7;
  --offline: #ff5c6c;
  --danger:  #ff5c6c;
  --warn:    #f5b942;

  /* radius / shadow */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --shadow:    0 1px 0 rgba(255,255,255,.03) inset, 0 8px 28px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.55);

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#root { height: 100%; }

/* light theme override (toggle) */
body.light {
  --bg:        #eef1f6;
  --bg-2:      #e7ebf2;
  --surface:   #ffffff;
  --surface-2: #f4f6fb;
  --surface-3: #eaeef6;
  --border:    #dde3ee;
  --border-2:  #cdd6e6;
  --text:   #131722;
  --muted:  #586079;
  --faint:  #8a93a8;
  --accent-soft: rgba(0,176,108,.12);
  --accent: #00b06c;
  --shadow:    0 1px 2px rgba(20,30,55,.06), 0 10px 30px rgba(20,30,55,.08);
  --shadow-lg: 0 24px 64px rgba(20,30,55,.18);
}

::selection { background: var(--accent-line); color: #fff; }

/* scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 20px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: padding-box; }

/* type helpers */
.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }
.num  { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* focus */
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: inherit; text-decoration: none; }

/* utility */
.app-fade { animation: appfade .28s ease; }
@keyframes appfade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin .8s linear infinite; }

/* live-stream subtle refresh flicker */
@keyframes streamPulse { 0%,100% { opacity: 1; } 50% { opacity: .985; } }

@keyframes ping { 0% { transform: scale(1); opacity: .6; } 80%,100% { transform: scale(2.4); opacity: 0; } }
@keyframes tapRing { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes btnFlash { 0% { box-shadow: 0 0 0 0 var(--accent-line); } 100% { box-shadow: 0 0 0 12px transparent; } }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* Logo phone labs : blanc en thème sombre, noir en thème clair */
.logo-img { display: block; }
.logo-on-dark { display: block; }
.logo-on-light { display: none; }
body.light .logo-on-dark { display: none; }
body.light .logo-on-light { display: block; }