/* ──────────────────────────────────────────────────────────────
   Cobalt — Colors
   The curated, human-readable color layer for the Sahar platform.
   Base palettes (--cb-blue-70 …) + semantic aliases (--cb-text, --cb-surface …).
   Values extracted from the Figma variable collections (Primitives / Product /
   Colors Token). The full raw Figma export lives in tokens/figma/fig-tokens.css.
   ────────────────────────────────────────────────────────────── */

:root {
  /* ---- Brand / Cobalt blue (Social product primary) ---- */
  --cb-blue-5:   rgb(251, 252, 254);
  --cb-blue-10:  rgb(236, 241, 252);
  --cb-blue-20:  rgb(203, 217, 246);
  --cb-blue-30:  rgb(172, 194, 241);
  --cb-blue-40:  rgb(143, 172, 236);
  --cb-blue-50:  rgb(115, 152, 231);
  --cb-blue-60:  rgb(89, 132, 226);
  --cb-blue-70:  rgb(63, 113, 222);   /* ★ primary cobalt */
  --cb-blue-80:  rgb(42, 87, 187);
  --cb-blue-90:  rgb(33, 70, 152);
  --cb-blue-100: rgb(25, 43, 81);

  /* ---- Neutral / ink + greys ---- */
  --cb-neutral-00:  rgb(255, 255, 255);
  --cb-neutral-05:  rgb(243, 243, 243);
  --cb-neutral-10:  rgb(239, 239, 239);
  --cb-neutral-20:  rgb(226, 226, 226);
  --cb-neutral-30:  rgb(210, 210, 210);
  --cb-neutral-40:  rgb(191, 191, 191);
  --cb-neutral-50:  rgb(169, 169, 169);
  --cb-neutral-60:  rgb(147, 147, 147);
  --cb-neutral-70:  rgb(117, 117, 117);
  --cb-neutral-80:  rgb(89, 89, 89);
  --cb-neutral-90:  rgb(66, 66, 66);
  --cb-neutral-100: rgb(42, 42, 42);
  --cb-ink:         rgb(14, 15, 17);   /* near-black text */

  /* ---- Semantic: success (green) ---- */
  --cb-green-10:  rgb(221, 247, 232);
  --cb-green-50:  rgb(35, 154, 85);
  --cb-green-70:  rgb(30, 135, 75);
  --cb-green-80:  rgb(29, 106, 62);
  --cb-green-90:  rgb(24, 79, 47);

  /* ---- Semantic: danger (red) ---- */
  --cb-red-10:  rgb(251, 238, 237);
  --cb-red-20:  rgb(244, 214, 211);
  --cb-red-70:  rgb(208, 62, 47);
  --cb-red-80:  rgb(176, 49, 36);
  --cb-red-90:  rgb(132, 38, 29);

  /* ---- Semantic: warning (orange) ---- */
  --cb-orange-10: rgb(244, 238, 234);
  --cb-orange-20: rgb(238, 223, 212);
  --cb-orange-60: rgb(225, 125, 55);
  --cb-orange-70: rgb(184, 92, 27);
  --cb-orange-90: rgb(98, 53, 21);

  /* ---- Cross-product accents ---- */
  --cb-violet-50:  rgb(176, 144, 240);  /* Usecase product */
  --cb-violet-70:  rgb(125, 77, 223);
  --cb-violet-80:  rgb(109, 65, 197);
  --cb-web-green:  rgb(89, 184, 160);   /* Web product primary */
  --cb-web-green-strong: rgb(28, 133, 106);

  /* ---- Categorical / tag surfaces (data viz + tags) ---- */
  --cb-teal-10:   rgb(230, 245, 243);
  --cb-teal-70:   rgb(0, 133, 120);
  --cb-purple-10: rgb(243, 240, 255);
  --cb-purple-70: rgb(125, 77, 223);
  --cb-olive-10:  rgb(244, 242, 231);
  --cb-olive-70:  rgb(124, 124, 36);
  --cb-brown-10:  rgb(244, 239, 234);
  --cb-brown-70:  rgb(150, 99, 64);
  --cb-yellow-10: rgb(250, 244, 222);
  --cb-yellow-70: rgb(168, 130, 20);

  /* ─────────────────  SEMANTIC ALIASES  ───────────────── */

  /* Brand */
  --cb-primary:        var(--cb-blue-70);
  --cb-primary-hover:  var(--cb-blue-80);
  --cb-primary-active: var(--cb-blue-90);
  --cb-primary-soft:   var(--cb-blue-10);
  --cb-primary-tint:   var(--cb-blue-5);
  --cb-on-primary:     rgb(255, 255, 255);

  /* Text */
  --cb-text:           var(--cb-ink);          /* default body / heading */
  --cb-text-secondary: rgb(98, 99, 100);       /* supporting copy */
  --cb-text-tertiary:  var(--cb-neutral-70);   /* meta, captions */
  --cb-text-disabled:  var(--cb-neutral-50);
  --cb-text-link:      var(--cb-blue-70);
  --cb-text-on-color:  rgb(255, 255, 255);

  /* Surfaces */
  --cb-surface-page:    rgb(240, 243, 245);   /* app canvas */
  --cb-surface-section: rgb(248, 249, 252);   /* panel / subsection */
  --cb-surface-card:    rgb(255, 255, 255);   /* cards, sheets */
  --cb-surface-select:  rgb(245, 248, 250);   /* hovered row */
  --cb-surface-sunken:  var(--cb-neutral-05);
  --cb-surface-inverse: var(--cb-neutral-100);
  --cb-overlay:         rgba(14, 15, 17, 0.45);

  /* Sidebar rail (the dark navigation column) */
  --cb-rail:        rgb(20, 33, 61);          /* deep cobalt navy */
  --cb-rail-2:      rgb(27, 43, 79);
  --cb-rail-active: var(--cb-blue-70);
  --cb-rail-text:   rgba(255, 255, 255, 0.72);

  /* Borders */
  --cb-border:        rgb(231, 232, 237);     /* default hairline */
  --cb-border-strong: var(--cb-neutral-30);
  --cb-border-focus:  var(--cb-blue-70);

  /* States */
  --cb-success:      var(--cb-green-70);
  --cb-success-soft: var(--cb-green-10);
  --cb-danger:       var(--cb-red-70);
  --cb-danger-soft:  var(--cb-red-10);
  --cb-warning:      var(--cb-orange-70);
  --cb-warning-soft: var(--cb-orange-10);
  --cb-info:         var(--cb-blue-70);
  --cb-info-soft:    var(--cb-blue-10);
}

/* ════════════════════════════════════════════════════════════════
   DARK THEME
   Opt-in: set <html data-theme="dark"> or class="dark" on a wrapper
   (matches the Figma dark mode). The base ramps are re-pointed to the
   Figma dark values, so every semantic --cb-* alias (and therefore
   every component) inherits dark styling automatically. Surfaces,
   text, borders and the rail carry explicit dark literals.
   Values extracted from tokens/figma/fig-tokens.css :root[data-theme="dark"].
   ════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"],
.cb-dark,
.dark {
  /* ---- Brand / cobalt (brighter on dark) ---- */
  --cb-blue-5:   rgb(21, 24, 29);
  --cb-blue-10:  rgb(23, 29, 39);
  --cb-blue-20:  rgb(28, 40, 59);
  --cb-blue-30:  rgb(34, 56, 89);
  --cb-blue-40:  rgb(38, 73, 125);
  --cb-blue-50:  rgb(41, 91, 163);
  --cb-blue-60:  rgb(56, 118, 209);
  --cb-blue-70:  rgb(97, 147, 219);   /* ★ primary cobalt (dark) */
  --cb-blue-80:  rgb(134, 170, 223);
  --cb-blue-90:  rgb(184, 204, 234);
  --cb-blue-100: rgb(224, 233, 245);

  /* ---- Neutral ramp (inverted) ---- */
  --cb-neutral-00:  rgb(42, 42, 42);
  --cb-neutral-05:  rgb(46, 46, 46);
  --cb-neutral-10:  rgb(50, 50, 50);
  --cb-neutral-20:  rgb(56, 56, 56);
  --cb-neutral-30:  rgb(66, 66, 66);
  --cb-neutral-40:  rgb(80, 80, 80);
  --cb-neutral-50:  rgb(99, 99, 99);
  --cb-neutral-60:  rgb(128, 128, 128);
  --cb-neutral-70:  rgb(160, 160, 160);
  --cb-neutral-80:  rgb(190, 190, 190);
  --cb-neutral-90:  rgb(216, 216, 216);
  --cb-neutral-100: rgb(240, 240, 240);
  --cb-ink:         rgb(237, 238, 240);

  /* ---- Semantic ramps (dark) ---- */
  --cb-green-10: rgb(25, 37, 27);   --cb-green-50: rgb(57, 147, 75);
  --cb-green-70: rgb(113, 203, 131); --cb-green-80: rgb(146, 211, 159); --cb-green-90: rgb(190, 228, 198);
  --cb-red-10: rgb(38, 23, 23);     --cb-red-20: rgb(58, 29, 29);
  --cb-red-70: rgb(214, 103, 103);  --cb-red-80: rgb(219, 138, 138);   --cb-red-90: rgb(232, 186, 186);
  --cb-orange-10: rgb(40, 29, 21);  --cb-orange-20: rgb(62, 40, 25);
  --cb-orange-60: rgb(223, 117, 42); --cb-orange-70: rgb(230, 146, 86); --cb-orange-90: rgb(239, 204, 179);

  /* ---- Cross-product & categorical (dark) ---- */
  --cb-violet-50: rgb(176, 144, 240); --cb-violet-70: rgb(157, 124, 240); --cb-violet-80: rgb(188, 164, 255);
  --cb-web-green: rgb(89, 184, 160);  --cb-web-green-strong: rgb(113, 203, 131);
  --cb-teal-10: rgb(18, 43, 41);     --cb-teal-70: rgb(108, 249, 236);
  --cb-purple-10: rgb(40, 29, 71);   --cb-purple-70: rgb(188, 164, 255);
  --cb-olive-10: rgb(47, 58, 4);     --cb-olive-70: rgb(231, 249, 159);
  --cb-brown-10: rgb(38, 28, 23);    --cb-brown-70: rgb(249, 197, 159);
  --cb-yellow-10: rgb(60, 55, 2);    --cb-yellow-70: rgb(253, 245, 155);

  /* ---- Text ---- (secondaire/tertiaire éclaircis pour la lisibilité sur fond sombre) */
  --cb-text:           var(--cb-ink);
  --cb-text-secondary: rgb(198, 200, 206);
  --cb-text-tertiary:  rgb(166, 168, 174);
  --cb-text-disabled:  rgb(110, 110, 110);
  --cb-text-link:      var(--cb-blue-80);
  --cb-text-on-color:  rgb(255, 255, 255);

  /* ---- Surfaces (dark canvas → elevated cards) ---- */
  --cb-surface-page:    rgb(20, 20, 22);
  --cb-surface-section: rgb(31, 31, 34);
  --cb-surface-card:    rgb(38, 38, 41);
  --cb-surface-select:  rgb(46, 48, 53);
  --cb-surface-sunken:  rgb(28, 28, 30);
  --cb-surface-inverse: rgb(240, 240, 240);
  --cb-overlay:         rgba(0, 0, 0, 0.62);

  /* ---- Sidebar rail (slightly deeper than light) ---- */
  --cb-rail:        rgb(16, 21, 33);
  --cb-rail-2:      rgb(22, 28, 44);
  --cb-rail-active: var(--cb-blue-70);
  --cb-rail-text:   rgba(255, 255, 255, 0.7);

  /* ---- Borders ---- */
  --cb-border:        rgb(58, 60, 66);
  --cb-border-strong: rgb(78, 81, 88);
  --cb-border-focus:  var(--cb-blue-70);

  /* ---- Re-declare var()-based semantic aliases so they recompute against
         the dark base ramps above (CSS resolves an alias's var() on the
         element where it is declared, so :root's light values would
         otherwise be inherited verbatim). ---- */
  --cb-primary:        var(--cb-blue-70);
  --cb-primary-hover:  var(--cb-blue-80);
  --cb-primary-active: var(--cb-blue-90);
  --cb-primary-soft:   var(--cb-blue-10);
  --cb-primary-tint:   var(--cb-blue-5);
  --cb-on-primary:     rgb(255, 255, 255);
  --cb-success:      var(--cb-green-70);
  --cb-success-soft: var(--cb-green-10);
  --cb-danger:       var(--cb-red-70);
  --cb-danger-soft:  var(--cb-red-10);
  --cb-warning:      var(--cb-orange-70);
  --cb-warning-soft: var(--cb-orange-10);
  --cb-info:         var(--cb-blue-70);
  --cb-info-soft:    var(--cb-blue-10);

  /* ---- Elevation: deeper, darker shadows + a lighter hairline ring ---- */
  --cb-shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.4);
  --cb-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
  --cb-shadow-md:  0 2px 6px rgba(0, 0, 0, 0.45), 0 6px 16px rgba(0, 0, 0, 0.5);
  --cb-shadow-lg:  0 10px 28px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
  --cb-shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.6);
  --cb-ring:       inset 0 0 0 1px var(--cb-border);
  --cb-ring-focus: 0 0 0 3px rgba(97, 147, 219, 0.32);
}