@import "tailwindcss";

/* ------------------------------------------------------------------ tokens */
:root {
  --background: #f7f8fa;
  --surface: #ffffff;
  --surface-2: #f1f3f5;
  --surface-3: #e9ecf0;
  --border: rgba(20, 25, 35, 0.09);
  --border-strong: rgba(20, 25, 35, 0.18);
  --text: #111318;
  --text-2: #656b76;
  --text-3: #8a909b;
  --qc26: #111827;
  --qc26-accent: #2563eb;
  --qc26-accent-soft: rgba(37, 99, 235, 0.1);
  --live: #dc2626;
  --ok: #15803d;
  --warn: #b45309;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(17, 19, 24, 0.04), 0 1px 1px rgba(17, 19, 24, 0.03);
  --shadow-md: 0 6px 24px -12px rgba(17, 19, 24, 0.18), 0 2px 6px -2px rgba(17, 19, 24, 0.06);
  --font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --header-h: 56px;
  --bottom-nav-h: 60px;
}

@theme inline {
  --color-background: var(--background);
  --color-surface: var(--surface);
  --color-surface-2: var(--surface-2);
  --color-surface-3: var(--surface-3);
  --color-border: var(--border);
  --color-border-strong: var(--border-strong);
  --color-ink: var(--text);
  --color-ink-2: var(--text-2);
  --color-ink-3: var(--text-3);
  --color-brand: var(--qc26);
  --color-accent: var(--qc26-accent);
  --color-accent-soft: var(--qc26-accent-soft);
  --color-live: var(--live);
  --color-ok: var(--ok);
  --color-warn: var(--warn);
  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --radius-card: var(--radius);
  --radius-card-lg: var(--radius-lg);
}

/* ------------------------------------------------------------------- base */
html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body {
  background: var(--background);
  color: var(--text);
  font-family: var(--font-sans);
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
}
.num { font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.01em; }
.display { letter-spacing: -0.035em; line-height: 0.95; font-weight: 700; }
.eyebrow { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--text-2); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-lg { border-radius: var(--radius-lg); }
.hairline { border-color: var(--border); }
.surface-2 { background: var(--surface-2); }

/* Dans @layer base pour que les utilitaires Tailwind (text-white, etc.) gardent la priorité. */
@layer base {
  a { color: inherit; text-decoration: none; }
  a:hover { text-decoration: none; }
}
.link { color: var(--qc26-accent); }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: rgba(37, 99, 235, 0.18); }
:focus-visible { outline: 2px solid var(--qc26-accent); outline-offset: 2px; border-radius: 4px; }

/* -------------------------------------------------------------- utilities */
.scrollbar-none { scrollbar-width: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }
.safe-bottom { padding-bottom: max(env(safe-area-inset-bottom), 0px); }
.tabular { font-variant-numeric: tabular-nums; }

@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.live-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--live); display: inline-block; animation: pulse-dot 1.6s ease-in-out infinite; }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fade-up 0.35s ease-out both; }
@keyframes ticker-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ticker-in { animation: ticker-in 0.3s ease-out both; }

/* table */
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.data-table th { text-align: left; font-weight: 600; color: var(--text-2); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; background: var(--surface); z-index: 1; }
.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table .r { text-align: right; }

/* range input */
input[type="range"] { accent-color: var(--qc26); }

/* print */
@media print { header, nav, footer, .no-print { display: none !important; } body { background: #fff; } }