/* ============================================================
   MarketLens — Design Tokens
   Direction esthétique : "Investigative Instrument"
   Dark-mode natif (obsidienne #0B1118) + accent lumineux
   Light mode préparé pour phase 2 (.light sur <html>)
   Réf : .omo/plans/marketlens-frontend-refonte.md §1
   ============================================================ */

:root {
  /* ═══ COULEURS DE BASE — Surfaces ink (dark natif) ═══ */
  --ink-900: #0B1118;   /* Fond principal — obsidienne, undertone bleu-télé */
  --ink-800: #111A24;   /* Surfaces élevées (cards, sidebar) */
  --ink-700: #1A2533;   /* Surfaces interactives (hover, inputs) */
  --ink-600: #25303F;   /* Bordures, séparateurs subtils */
  --ink-500: #344155;   /* Bordures marquées */

  /* ═══ COULEURS DE BASE — Texte mist ═══ */
  --mist-100: #F1F5F9;  /* Texte principal (sur fond sombre) */
  --mist-300: #CBD5E1;  /* Texte secondaire */
  --mist-400: #94A3B8;  /* Texte tertiaire, labels */
  --mist-500: #8294AB;  /* Placeholders, méta — WCAG AA ≥4.5:1 sur ink-700/800 */

  /* ═══ ACCENTS FONCTIONNELS — Sémantique global ═══ */
  --phosphor: #22D3EE;      /* Accent principal de marque — la lumière de la lentille */
  --phosphor-dim: #0E7490;  /* Phosphor pressé / bordures */
  --signal: #FBBF24;        /* Pivot / NAF divergent — alerte d'investigation */
  --signal-dim: #92400E;
  --vermillion: #EF4444;    /* Danger, risque élevé, défaillance */
  --spring: #10B981;        /* Succès, cohérence validée, opportunité saine */
  --iris: #818CF8;          /* Information neutre, tags secondaires (parcimonie) */

  /* ═══ ACCENT CONTEXTUEL — Surchargeable par data-persona ═══ */
  --accent: var(--phosphor);
  --accent-dim: var(--phosphor-dim);

  /* ═══ TYPOGRAPHY — Families ═══ */
  --font-display: 'Inter Tight', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* ═══ TYPOGRAPHY — Échelle mobile-first clamp fluide ═══ */
  --text-hero: clamp(2.75rem, 6vw, 4.5rem);
  --text-h1: clamp(2rem, 4vw, 3rem);
  --text-h2: clamp(1.5rem, 3vw, 2rem);
  --text-h3: 1.25rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-micro: 0.75rem;

  /* ═══ SPACING — Base 8px ═══ */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ═══ RADIUS ═══ */
  --r-sm: 6px;    /* inputs, chips */
  --r-md: 10px;   /* buttons, cards compactes */
  --r-lg: 16px;   /* cards principales */
  --r-pill: 999px;/* badges, buttons-pill */

  /* ═══ SHADOWS & GLOWS — spécifique dark mode ═══ */
  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 0 0 1px var(--ink-600);
  --shadow-elevated: 0 1px 0 rgba(255,255,255,0.06) inset, 0 0 0 1px var(--ink-500), 0 20px 40px -20px rgba(0,0,0,0.6);
  --glow-accent: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 24px -4px color-mix(in srgb, var(--accent) 35%, transparent);

  /* ═══ TRANSITIONS ═══ */
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ═══ CONTENT MAX-WIDTHS ═══ */
  --content-max: 1200px;
  --content-landing: 1100px;
  --content-dashboard: 960px;
}

/* ═══ VARIANTES D'ACCENT PAR PERSONA ═══ */
/* Injecté via data-persona sur <body>. Une seule logique, trois ambiances. */
[data-persona="avocat_ma"] {
  --accent: #BE123C;   /* crimson — gravité légale, dossier rouge */
  --accent-dim: #881337;
}
[data-persona="ec"] {
  --accent: #059669;   /* emerald — ordre, audit, croissance saine */
  --accent-dim: #064E3B;
}
[data-persona="b2b"] {
  --accent: #22D3EE;   /* phosphor — scan prospect, opportunité */
  --accent-dim: #0E7490;
}

/* ═══ LIGHT MODE — Phase 2 (non activé en V1) ═══ */
/* Pour activer : ajouter class="light" sur <html> */
html.light {
  --ink-900: #F8FAFC;   /* fond papier */
  --ink-800: #FFFFFF;
  --ink-700: #F1F5F9;
  --ink-600: #E2E8F0;
  --ink-500: #CBD5E1;
  --mist-100: #0B1118;  /* texte devient sombre */
  --mist-300: #1E293B;
  --mist-400: #475569;
  --mist-500: #64748B;
  /* Les accents restent identiques (phosphor, signal, etc.) */
}

/* ═══ KEYFRAMES — Signature MarketLens ═══ */

/* Scan line : la lentille qui balaie. Usage très parcimonieux (1-2/page max) */
@keyframes scan {
  0%   { transform: translateX(-100%); opacity: 0; }
  10%  { opacity: 0.4; }
  90%  { opacity: 0.4; }
  100% { transform: translateX(100%); opacity: 0; }
}

/* Pulse dot : étape pipeline running */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
  50%      { opacity: 0.6; box-shadow: 0 0 0 6px transparent; }
}

/* Fade up cascade : page load chorégraphié */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══ REDUCED MOTION — respect user preference ═══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}