/* ============================================================
   Tel qu'elle — Color tokens
   Aligned to the brand LOGO: navy + soft apricot on light.
   A modern, light, airy reading of the identity.
     Navy  #2E2D7A   •   Apricot  #E3A977   •   Ivory #FBF8F4
   ============================================================ */

:root {
  /* ---- Brand core (navy = primary, apricot = accent) ---- */
  --tqe-bleu:          #2E2D7A;   /* navy — wordmark, primary, structure */
  --tqe-bleu-deep:     #20204F;   /* deep navy — footers, depth */
  --tqe-bleu-light:    #3C3B95;   /* lifted navy — hovers */
  --tqe-bleu-300:      #9C9BC9;   /* muted navy — borders/icons */
  --tqe-bleu-100:      #ECECF6;   /* navy tint — soft fills */

  --tqe-or:            #E3A977;   /* apricot — the single warm accent */
  --tqe-or-deep:       #C98A52;   /* deep apricot — text on light */
  --tqe-or-light:      #F0C6A1;   /* light apricot — soft highlights */
  --tqe-or-100:        #FBEEE1;   /* apricot wash — backgrounds */

  /* ---- Warm neutrals (ivory family) ---- */
  --tqe-ivoire:        #FBF8F4;   /* ivory — light surfaces */
  --tqe-cream:         #F5F1EB;   /* alt section background */
  --tqe-sand:          #ECE6DD;   /* hairline borders, dividers */
  --tqe-stone:         #9A9388;   /* muted captions */
  --tqe-ink:           #232238;   /* primary text (navy-tinted) */
  --tqe-ink-soft:      #5C5A70;   /* secondary text */
  --tqe-white:         #FFFFFF;

  /* ---- Backwards-compat aliases (older components/cards) ---- */
  --tqe-indigo:        var(--tqe-bleu);
  --tqe-indigo-deep:   var(--tqe-bleu-deep);
  --tqe-indigo-700:    var(--tqe-bleu-light);
  --tqe-indigo-300:    var(--tqe-bleu-300);
  --tqe-indigo-100:    var(--tqe-bleu-100);
  --tqe-apricot:       var(--tqe-or);
  --tqe-apricot-deep:  var(--tqe-or-deep);
  --tqe-apricot-300:   var(--tqe-or-light);
  --tqe-apricot-100:   var(--tqe-or-100);
  --tqe-ivory:         var(--tqe-ivoire);

  /* ---- Semantic status ---- */
  --tqe-success:       #5E8B6A;
  --tqe-success-bg:    #E6EFE7;
  --tqe-error:         #C0584F;
  --tqe-error-bg:      #F6E3E0;
  --tqe-info:          var(--tqe-bleu);
  --tqe-info-bg:       var(--tqe-bleu-100);

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */
  --color-bg:              var(--tqe-ivoire);
  --color-surface:         var(--tqe-white);
  --color-surface-alt:     var(--tqe-cream);
  --color-surface-indigo:  var(--tqe-bleu);
  --color-surface-apricot: var(--tqe-or-100);

  --text-primary:    var(--tqe-ink);
  --text-secondary:  var(--tqe-ink-soft);
  --text-muted:      var(--tqe-stone);
  --text-on-indigo:  var(--tqe-ivoire);
  --text-on-apricot: var(--tqe-bleu-deep);
  --text-brand:      var(--tqe-bleu);
  --text-accent:     var(--tqe-or-deep);

  --border-subtle:   var(--tqe-sand);
  --border-strong:   var(--tqe-bleu-300);
  --border-focus:    var(--tqe-bleu);

  --accent:          var(--tqe-or);
  --accent-hover:    var(--tqe-or-deep);
  --brand:           var(--tqe-bleu);
  --brand-hover:     var(--tqe-bleu-light);
}