/* =============================================================================
   INTEXO DESIGN SYSTEM — Foundations: Color + Type
   -----------------------------------------------------------------------------
   Direction : "Efficient Trust". SaaS de qualification de leads pour artisans
   et PME françaises. Palette lumineuse (light-first) — fond froid/neutre, indigo
   primaire (SaaS professionnel), orange chaud pour les CTAs.
   Distinct de Lexo AI (navy/brass legal) : plus accessible, plus énergique.

   Chargement dans index.html :
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="...Space+Grotesk+Inter+IBM+Plex+Mono..." rel="stylesheet">
     <link rel="stylesheet" href="colors_and_type.css">
   ========================================================================== */

:root {
  /* ---- Brand fonts ---------------------------------------------------- */
  --font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;

  /* =========================================================================
     COLOR — Base palette (raw values)
     ====================================================================== */

  /* Neutrals (cool slate — pas de warmth comme Lexo) */
  --slate-950: #020617;
  --slate-900: #0F172A;
  --slate-800: #1E293B;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;
  --slate-50:  #F8FAFC;
  --white:     #FFFFFF;

  /* Indigo — primary brand (SaaS professionnel, confiant) */
  --indigo-900: #1E1B4B;
  --indigo-800: #312E81;
  --indigo-700: #3730A3;
  --indigo-600: #4F46E5;
  --indigo-500: #6366F1;
  --indigo-400: #818CF8;
  --indigo-300: #A5B4FC;
  --indigo-100: #E0E7FF;
  --indigo-50:  #EEF2FF;

  /* Orange — accent/CTA (énergie, action, warmth) */
  --orange-600: #EA580C;
  --orange-500: #F97316;
  --orange-400: #FB923C;
  --orange-200: #FED7AA;
  --orange-100: #FFEDD5;
  --orange-50:  #FFF7ED;

  /* Status hues */
  --green-700: #15803D;
  --green-600: #16A34A;
  --green-500: #22C55E;
  --green-100: #DCFCE7;
  --green-50:  #F0FDF4;
  --amber-700: #B45309;
  --amber-600: #D97706;
  --amber-500: #F59E0B;
  --amber-100: #FEF3C7;
  --amber-50:  #FFFBEB;
  --red-700:   #B91C1C;
  --red-600:   #DC2626;
  --red-500:   #EF4444;
  --red-100:   #FEE2E2;
  --red-50:    #FFF1F1;

  /* Score colors (qualification leads 0-100) */
  --score-high-fg:   var(--green-700);  /* ≥ 60 */
  --score-high-bg:   var(--green-50);
  --score-mid-fg:    var(--amber-700);  /* 30-59 */
  --score-mid-bg:    var(--amber-50);
  --score-low-fg:    var(--red-700);    /* < 30 */
  --score-low-bg:    var(--red-50);

  /* Amber scale étendu (accent principal, aligné sur l'app Intexo) */
  --amber-300: #FCD34D;
  --amber-400: #FBBF24;

  /* =========================================================================
     COLOR — Semantic tokens  (USE THESE in composants)
     ====================================================================== */
  /* Neutres chauds (warm off-white aligné sur l'accent amber, pas de bleu froid) */
  --warm-50:  #FBF9F5;   /* canvas */
  --warm-100: #F5EFE7;   /* puits / sections creusées */
  --warm-200: #ECE4D9;   /* hairline chaud */

  --bg:             var(--warm-50);     /* canvas page */
  --surface:        var(--white);       /* cartes, feuilles */
  --surface-sunken: var(--warm-100);    /* puits, inputs sur carte */
  --surface-rail:   var(--warm-50);     /* sidebar, header */

  --fg:             #1c1d20;           /* texte primaire (app Intexo foreground) */
  --fg-muted:       #4a4d52;           /* texte secondaire */
  --fg-subtle:      #8a8f98;           /* captions, tertiaire */
  --fg-on-dark:     #e7e8ea;           /* texte sur fond sombre */
  --fg-on-primary:  var(--white);      /* texte sur primary */

  --border:         #e9e5df;           /* hairline standard (chaud, app Intexo) */
  --border-strong:  var(--warm-200);
  --border-focus:   var(--amber-500);

  /* Primary — amber (aligné sur l'accent de l'app Intexo #ca8a04) */
  --primary:            var(--amber-600);   /* #D97706 */
  --primary-hover:      var(--amber-700);   /* #B45309 */
  --primary-active:     #92400e;
  --primary-foreground: var(--white);
  --primary-tint:       var(--amber-50);    /* #FFFBEB */

  /* Accent / CTA — même teinte amber, légèrement plus vif pour les boutons */
  --accent:            var(--amber-600);
  --accent-hover:      var(--amber-700);
  --accent-active:     #92400e;
  --accent-foreground: var(--white);
  --accent-tint:       var(--amber-100);   /* #FEF3C7 */

  /* Dark sections — near-black de la sidebar app Intexo (#16181c) */
  --dark-bg:       #16181c;
  --dark-surface:  #1c1d20;
  --dark-border:   #26282d;
  --dark-fg:       #e7e8ea;
  --dark-fg-muted: #9aa0a6;

  --ring: color-mix(in oklab, var(--amber-500) 45%, transparent);

  --success: var(--green-600);   --success-tint: var(--green-100);
  --warning: var(--amber-600);   --warning-tint: var(--amber-100);
  --danger:  var(--red-600);     --danger-tint:  var(--red-100);

  /* =========================================================================
     RADIUS · SHADOW · SPACING
     ====================================================================== */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;

  /* Shadows (cool slate-tinted, not warm like Lexo) */
  --shadow-xs: 0 1px 2px rgba(15,23,42,.06);
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 2px 6px rgba(15,23,42,.05);
  --shadow-md: 0 2px 4px rgba(15,23,42,.05), 0 8px 20px rgba(15,23,42,.08);
  --shadow-lg: 0 4px 8px rgba(15,23,42,.06), 0 20px 44px rgba(15,23,42,.12);
  --shadow-ring: 0 0 0 1px var(--border);

  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* =========================================================================
     TYPE SCALE
     ====================================================================== */
  --text-display: 700 56px/1.05 var(--font-display);
  --text-h1:      700 42px/1.1  var(--font-display);
  --text-h2:      600 30px/1.2  var(--font-display);
  --text-h3:      600 22px/1.3  var(--font-display);
  --text-title:   600 18px/1.35 var(--font-sans);
  --text-body-lg: 400 18px/1.6  var(--font-sans);
  --text-body:    400 15px/1.6  var(--font-sans);
  --text-sm:      400 13.5px/1.5 var(--font-sans);
  --text-caption: 500 12px/1.4  var(--font-sans);
  --text-overline:600 11.5px/1.3 var(--font-sans);
  --text-mono-lg: 600 20px/1.2  var(--font-mono);
  --text-mono:    500 14px/1.4  var(--font-mono);
}

/* =============================================================================
   SEMANTIC ELEMENT DEFAULTS  (scoped under .sc)
   ========================================================================== */
.sc, body.sc {
  background: var(--bg);
  color: var(--fg);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.sc :where(h1), .sc .h1 { font: var(--text-h1); letter-spacing: -0.015em; color: var(--fg); margin: 0; }
.sc :where(h2), .sc .h2 { font: var(--text-h2); letter-spacing: -0.005em; color: var(--fg); margin: 0; }
.sc :where(h3), .sc .h3 { font: var(--text-h3); color: var(--fg); margin: 0; }
.sc .display       { font: var(--text-display); letter-spacing: -0.02em; margin: 0; }
.sc :where(p) { margin: 0; }
.sc a  { color: var(--primary); text-decoration: none; }
.sc a:hover { color: var(--primary-hover); }
.sc code, .sc pre { font-family: var(--font-mono); font-size: 0.92em; }

/* Utility type classes */
.t-display { font: var(--text-display); letter-spacing: -0.02em; }
.t-h1      { font: var(--text-h1);      letter-spacing: -0.015em; }
.t-h2      { font: var(--text-h2); }
.t-h3      { font: var(--text-h3); }
.t-title   { font: var(--text-title); }
.t-body-lg { font: var(--text-body-lg); }
.t-body    { font: var(--text-body); }
.t-sm      { font: var(--text-sm); }
.t-caption { font: var(--text-caption); color: var(--fg-muted); }
.t-overline {
  font: var(--text-overline);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary);
}
.t-muted   { color: var(--fg-muted); }
.t-subtle  { color: var(--fg-subtle); }
.t-mono    { font: var(--text-mono); }
.t-mono-lg { font: var(--text-mono-lg); }