/* ===========================================================================
   French IPTV — Color tokens  (French flag theme: blue · white · red)
   White / cool-light surfaces, a confident French blue, and a flag-red accent,
   anchored by a deep navy ink for text and dark sections.
   =========================================================================== */

:root {
  /* --- Ink / navy (cool, deep — text + dark sections) ----------------- */
  --ink-950: #0a1326;
  --ink-900: #0f1c3a;
  --ink-800: #16264d;
  --ink-700: #213662;
  --ink-600: #324a7d;
  --ink-500: #46608f;

  /* --- Brand blue (French flag blue) --------------------------------- */
  --blue-700: #0a3f87;
  --blue-600: #0b54b0; /* primary brand blue */
  --blue-500: #1769d4;
  --blue-400: #4d93ec;
  --blue-200: #b3cdf3;
  --blue-100: #dbe8fb;
  --blue-50:  #eef4fd;

  /* --- Red (French flag red — accent) -------------------------------- */
  --rouge-700: #b81c2c;
  --rouge-600: #d72436;
  --rouge-500: #ef4135; /* flag red */
  --rouge-200: #f6c1c5;
  --rouge-100: #fbdbde;
  --rouge-50:  #fdeff0;

  /* --- Cool neutrals (on white) -------------------------------------- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f7f9fc;
  --neutral-100: #eef2f8;
  --neutral-200: #e1e8f2;
  --neutral-300: #cdd7e6;
  --neutral-400: #9fadc2;
  --neutral-500: #6b7890;
  --neutral-600: #4c596f;
  --neutral-700: #36425a;
  --neutral-800: #232d42;
  --neutral-900: #161d2e;

  /* --- Surfaces / backgrounds (white + cool light) ------------------- */
  --paper:    #ffffff;
  --paper-2:  #f6f9fd;
  --paper-3:  #eaf1fb;

  /* --- Functional ----------------------------------------------------- */
  --green-600: #1f8a5b;
  --green-100: #d7efe2;
  --amber-600: #b8791c;
  --amber-100: #f6e7c8;
  --red-600:   #d72436;

  /* ===================================================================
     Semantic aliases — reference THESE in components, not raw scales.
     =================================================================== */
  --bg:             var(--paper);
  --bg-alt:         var(--paper-3);
  --surface:        var(--neutral-0);
  --surface-sunken: var(--neutral-50);
  --surface-ink:    var(--ink-900);   /* dark sections / footer */

  --text-strong:    var(--ink-900);
  --text-body:      #232d42;
  --text-muted:     #566181;
  --text-faint:     #8b97ad;
  --text-on-ink:    #eef3fb;
  --text-on-ink-muted: #a7b4ce;

  --brand:          var(--blue-600);
  --brand-strong:   var(--blue-700);
  --brand-ink:      var(--ink-900);
  --accent:         var(--rouge-600);
  --accent-strong:  var(--rouge-700);

  --link:           var(--blue-600);
  --link-hover:     var(--blue-700);

  --border:         rgba(15, 28, 58, 0.12);
  --border-strong:  rgba(15, 28, 58, 0.22);
  --border-ink:     rgba(255, 255, 255, 0.14);

  --focus-ring:     rgba(23, 105, 212, 0.45);

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

  /* Button intents */
  --btn-primary-bg:     var(--ink-900);
  --btn-primary-bg-hov: var(--ink-800);
  --btn-primary-fg:     #ffffff;
  --btn-brand-bg:       var(--blue-600);
  --btn-brand-bg-hov:   var(--blue-700);
  --btn-accent-bg:      var(--rouge-600);
  --btn-accent-bg-hov:  var(--rouge-700);
}