/* ============================================================
   Solar Bridge — Color tokens
   The brand is built on a single signature element: the SOLAR
   SPECTRUM — a ray gradient running deep ember red → orange →
   gold → lime → green, always read on near-black. It doubles as
   an energy-efficiency scale (A→G), which suits solar perfectly.
   ============================================================ */

:root {
  /* ---- Solar spectrum (the signature, sampled from the logo) ---- */
  --sun-ember:   #B5240A;   /* deepest, lowest-energy red    */
  --sun-orange:  #DB6E01;   /* warm orange                   */
  --sun-amber:   #ED9A00;   /* amber                         */
  --sun-gold:    #F0C808;   /* gold / yellow                 */
  --sun-citron:  #CBD92A;   /* yellow-green                  */
  --sun-lime:    #9FD92A;   /* lime                          */
  --sun-green:   #7CC41C;   /* high-energy green             */

  /* The brand gradient. Use for hero washes, rays, energy bars. */
  --gradient-solar: linear-gradient(90deg,
    var(--sun-ember) 0%,
    var(--sun-orange) 26%,
    var(--sun-amber) 42%,
    var(--sun-gold) 56%,
    var(--sun-citron) 72%,
    var(--sun-lime) 86%,
    var(--sun-green) 100%);
  --gradient-warm: linear-gradient(120deg, var(--sun-ember) 0%, var(--sun-orange) 50%, var(--sun-gold) 100%);
  --gradient-fade-ink: linear-gradient(180deg, rgba(10,10,10,0) 0%, var(--ink-900) 80%);

  /* ---- Primary brand ramp (warm solar orange) ---- */
  --orange-50:  #FEF3E6;
  --orange-100: #FCE0BF;
  --orange-200: #F8C285;
  --orange-300: #F2A248;
  --orange-400: #EC8716;
  --orange-500: #DB6E01;   /* core brand orange */
  --orange-600: #B85700;
  --orange-700: #934503;
  --orange-800: #6F340A;
  --orange-900: #4A240B;

  /* ---- Green ramp (energy / positive) ---- */
  --green-50:  #F1FAE2;
  --green-100: #DCF2B7;
  --green-200: #C2E882;
  --green-300: #A4D94C;
  --green-400: #8BCB29;
  --green-500: #6FA918;   /* accessible green for text/fills */
  --green-600: #588712;
  --green-700: #436810;
  --green-800: #314C10;
  --green-900: #21330C;

  /* ---- Sky (single restrained cool accent — links / info) ---- */
  --sky-50:  #E9F4FB;
  --sky-100: #C8E4F4;
  --sky-300: #6FBCE3;
  --sky-500: #2A93C9;
  --sky-700: #196A95;

  /* ---- Warm neutrals (ink) — tinted toward the Ivorian sun ---- */
  --ink-900: #0A0A0A;   /* brand black           */
  --ink-850: #131211;
  --ink-800: #1C1A18;
  --ink-700: #2A2724;
  --ink-600: #423E39;
  --ink-500: #635D55;
  --ink-400: #8C857B;
  --ink-300: #B4ADA2;
  --ink-200: #D8D2C8;
  --ink-150: #E7E2D9;
  --ink-100: #EFEBE3;
  --ink-50:  #F6F0E2;   /* pale cream page        */
  --white:   #FFFFFF;

  /* ---- Named brand colors (B2B palette: ember on black, gold highlights) ---- */
  --ember:   #DB6E01;   /* primary flame orange  */
  --flame:   #C9460A;   /* hotter ember red-orange */
  --gold:    #F0C808;   /* secondary highlight   */
  --amber:   #ED9A00;   /* secondary highlight   */
  --cream:   #F6F0E2;   /* pale cream            */
  --cream-dim: #E4DBC6; /* muted cream on black  */

  /* WhatsApp Business — the primary contact channel (its own brand color) */
  --whatsapp:       #25D366;
  --whatsapp-hover: #1FB857;
  --whatsapp-press: #18994A;

  /* Warm CTA gradient (ember → orange → gold, NO green — avoids solar cliché) */
  --gradient-ember: linear-gradient(120deg, var(--flame) 0%, var(--ember) 46%, var(--gold) 100%);

  /* =========================================================
     SEMANTIC ALIASES — light surface (default)
     ========================================================= */
  --brand:           var(--orange-500);
  --brand-hover:     var(--orange-600);
  --brand-press:     var(--orange-700);
  --brand-subtle:    var(--orange-50);
  --brand-border:    var(--orange-200);
  --on-brand:        #FFFFFF;

  --accent:          var(--gold);
  --accent-hover:    var(--amber);
  --accent-subtle:   #FBF1C9;
  --on-accent:       var(--ink-900);

  --text-strong:     var(--ink-900);
  --text-body:       var(--ink-700);
  --text-muted:      var(--ink-500);
  --text-faint:      var(--ink-400);
  --text-inverse:    var(--ink-50);
  --text-link:       var(--sky-700);
  --text-on-brand:   #FFFFFF;

  --surface-page:    var(--ink-50);
  --surface-card:    var(--white);
  --surface-raised:  var(--white);
  --surface-sunk:    var(--ink-100);
  --surface-inverse: var(--ink-900);

  --border-subtle:   var(--ink-150);
  --border-default:  var(--ink-200);
  --border-strong:   var(--ink-400);

  /* Semantic status */
  --success:         var(--green-500);
  --success-subtle:  var(--green-50);
  --warning:         var(--sun-amber);
  --warning-subtle:  #FDF1DA;
  --danger:          #C92A12;
  --danger-subtle:   #FBE7E2;
  --info:            var(--sky-500);
  --info-subtle:     var(--sky-50);

  --focus-ring:      var(--orange-400);
}

/* =========================================================
   DARK SURFACE — the brand's native habitat (black + spectrum)
   Add data-theme="dark" to any container or :root.
   ========================================================= */
[data-theme="dark"] {
  --brand:           var(--orange-400);
  --brand-hover:     var(--orange-300);
  --brand-press:     var(--orange-500);
  --brand-subtle:    rgba(219,110,1,0.14);
  --brand-border:    rgba(236,135,22,0.35);
  --on-brand:        var(--ink-900);

  --accent:          var(--gold);
  --accent-hover:    var(--amber);
  --accent-subtle:   rgba(240,200,8,0.16);
  --on-accent:       var(--ink-900);

  --text-strong:     var(--ink-50);
  --text-body:       var(--ink-200);
  --text-muted:      var(--ink-400);
  --text-faint:      var(--ink-500);
  --text-inverse:    var(--ink-900);
  --text-link:       var(--sky-300);
  --text-on-brand:   var(--ink-900);

  --surface-page:    var(--ink-900);
  --surface-card:    var(--ink-850);
  --surface-raised:  var(--ink-800);
  --surface-sunk:    #050505;
  --surface-inverse: var(--ink-50);

  --border-subtle:   rgba(255,255,255,0.07);
  --border-default:  rgba(255,255,255,0.13);
  --border-strong:   rgba(255,255,255,0.30);

  --success-subtle:  rgba(111,169,24,0.16);
  --warning-subtle:  rgba(237,154,0,0.16);
  --danger:          #F0563A;
  --danger-subtle:   rgba(201,42,18,0.18);
  --info:            var(--sky-300);
  --info-subtle:     rgba(42,147,201,0.16);

  --focus-ring:      var(--orange-300);
}