/* =============================================================
   TOKENS - Adaprompt / rendu.be
   Sprint 1 frontend (2026-04-15)
   Réorganisation : palette source brand-*, tokens sémantiques --accent-*,
   échelle spacing, échelle typo, elevation, radius, focus ring.
   Aliases legacy --sky/--blue/etc. conservés 60 jours pour modules non migrés.
   ============================================================= */

:root {
  /* ----- Palette source (brand) -----
     Ne pas consommer directement dans les composants cours.
     Réservé landing, branding, certificats. */
  --brand-sky:     #60BFF5;
  --brand-blue:    #2E63A4;
  --brand-caramel: #AF6528;
  --brand-yellow:  #FFCE00;
  --brand-red:     #D70000;
  --brand-green:   #58D68D;
  --brand-black:   #000000;
  --brand-white:   #FFFFFF;
  --brand-offwhite: #F8F6F1;
  --brand-cream:   #F0EDE5;

  /* ----- Aliases legacy (à supprimer après migration complète) -----
     Conservés 60 jours pour ne pas casser les modules non encore migrés
     (cours/comprendre/* en HTML pur, assistant/module-1, autres cours payants). */
  --sky:     var(--brand-sky);
  --blue:    var(--brand-blue);
  --caramel: var(--brand-caramel);
  --yellow:  var(--brand-yellow);
  --red:     var(--brand-red);
  --green:   var(--brand-green);
  --black:   var(--brand-black);
  --white:   var(--brand-white);
  --offwhite: var(--brand-offwhite);
  --cream:   var(--brand-cream);
  --text-muted: #5A5A52;
  --text-light: #8A8A80;
  --border:  #E0DDD5;

  /* ----- Familles typographiques ----- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ----- Échelle typo (six niveaux nommés par intention) ----- */
  --type-title:    600 2.25rem/1.2 var(--font-display);   /* h1 module */
  --type-section:  600 1.5rem/1.3 var(--font-display);    /* h2 Reposer / acte */
  --type-lede:     500 1.25rem/1.5 var(--font-body);      /* question d'ouverture */
  --type-body:     400 1.0625rem/1.7 var(--font-body);    /* corps */
  --type-caption:  400 0.875rem/1.5 var(--font-body);     /* meta, eyebrow */
  --type-mono:     400 0.9375rem/1.65 var(--font-mono);   /* citation prompt */

  /* ----- Spacing scale (sémantique) ----- */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   48px;
  --space-xxl:  96px;

  /* ----- Elevation ----- */
  --elev-flat:     none;
  --elev-floating: 0 2px 8px rgba(0, 0, 0, 0.08);

  /* ----- Border radius ----- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-full: 999px;

  /* ----- Animation (legacy) ----- */
  --ease:  cubic-bezier(0.33, 1, 0.68, 1);
  --speed: 0.25s;
}

/* =============================================================
   THEME DARK (par défaut)
   ============================================================= */
[data-theme="dark"], :root {
  /* Surfaces */
  --bg:           #0D1117;
  --bg-card:      #161B22;
  --bg-elevated:  #1C2128;
  --border-dark:  #30363D;

  /* Texte */
  --text-primary:   #E6EDF3;
  --text-secondary: #B8C0CC;  /* promu pour ≥ 7:1, fusionne avec ancien text-reading */
  --text-tertiary:  #8B949E;
  --text-reading:   var(--text-secondary);  /* alias legacy */

  /* Accents sémantiques (interactifs uniquement) */
  --accent-primary:        var(--brand-sky);
  --accent-warning:        var(--brand-yellow);
  --accent-danger:         var(--brand-red);
  --accent-success:        var(--brand-green);

  /* Versions atténuées pour préfixes in-flow Astuce / Piège.
     Dérivés de sky/yellow avec luminosité ajustée pour passer 4.5:1
     sur --bg (#0D1117) et --bg-elevated (#1C2128). */
  --accent-primary-muted:  #7BC8F2;  /* sky claircie pour dark, AA sur bg-elevated */
  --accent-warning-muted:  #E0B84A;  /* yellow assombrie pour dark, AA sur bg-elevated */

  /* Focus ring (outline + offset visible sur fond coloré) */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-primary);
}

/* =============================================================
   THEME LIGHT
   ============================================================= */
[data-theme="light"] {
  --bg:           #FFFFFF;
  --bg-card:      #F6F8FA;
  --bg-elevated:  #F0F2F5;
  --border-dark:  #D0D7DE;

  --text-primary:   #1F2328;
  --text-secondary: #424A53;  /* promu, fusionne avec ancien text-reading */
  --text-tertiary:  #656D76;
  --text-reading:   var(--text-secondary);

  --accent-primary:        var(--brand-blue);    /* sky trop clair sur fond blanc, on prend blue pour AA */
  --accent-warning:        #B8860B;              /* yellow pur insuffisant en light, version dark goldenrod */
  --accent-danger:         var(--brand-red);
  --accent-success:        #1A7F3C;              /* green pur insuffisant en light, version assombrie */

  --accent-primary-muted:  #2E63A4;  /* blue, lisible sur bg blanc et bg-elevated */
  --accent-warning-muted:  #8B6914;  /* dark goldenrod assombri pour AA */

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-primary);
}