/*
 * CryptoExplor — jetons de conception (tokens) portés de la maquette v3 « Signal ».
 * Mode clair + variables responsive. Chargé sur le site ET dans l'éditeur.
 * Le mode sombre est défini dans main.css (site uniquement).
 * Toute modification de couleur doit être répercutée dans theme.json (palette).
 */
:root {
  color-scheme: light;

  /* Corps de page */
  --bg: #f7f8f7;
  --surface: #ffffff;
  --surface-2: #eef1ef;
  --border: #dde3df;
  --border-strong: #c3ccc7;
  --text: #0f1714;
  --text-2: #2c3631;
  --muted: #56615b;           /* 6,0:1 sur --bg */
  --accent: #15803d;          /* texte vert sur fond clair : 4,9:1 sur --bg */
  --accent-deco: #22c55e;     /* décoration uniquement */
  --accent-soft: #e5f4ea;
  --on-accent: #ffffff;
  --focus: #15803d;

  /* Sévérités (texte + fond teinté) */
  --sev-critical: #b91c1c;
  --sev-critical-bg: #fdeeee;
  --sev-important: #a14b06;
  --sev-important-bg: #fdf3e4;
  --sev-info: #1d4ed8;
  --sev-info-bg: #ebf1fe;
  --sev-none: #c3ccc7;

  /* Statuts de vérification */
  --status-confirmed: #15803d;
  --status-pending: #a14b06;
  --status-corrected: #6d28d9;

  /* Bande sombre (ticker + header + footer) */
  --band-bg: #0b0f0e;
  --band-bg-2: #131917;
  --band-border: #232d29;
  --band-text: #e8eeeb;
  --band-muted: #9aa8a1;      /* 7,4:1 sur --band-bg */
  --band-accent: #22c55e;
  --band-brand: #4ade80;      /* vert du logo (spec/logo/) */
  --band-up: #22c55e;
  --band-down: #f87171;
  --band-warn: #fbbf24;

  /* Visuels de remplacement */
  --ph-base: #0f1714;
  --ph-line: rgba(255, 255, 255, .07);
  --ph-glyph: rgba(255, 255, 255, .16);

  /* Typographie */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Mise en page */
  --radius: 12px;
  --radius-sm: 8px;
  --container: 1280px;
  --gutter: 16px;
  --section-gap: 56px;
  --ticker-h: 68px;           /* mobile : 2 lignes (statut + défilement) */
  --header-h: 60px;
  --shadow: 0 1px 2px rgba(15, 23, 20, .05), 0 4px 16px rgba(15, 23, 20, .04);
}

@media (min-width: 1024px) {
  :root {
    --gutter: 32px;
    --section-gap: 80px;
    --ticker-h: 40px;
    --header-h: 104px;
  }
}