/* ============================================================
   Design Tokens — webe Media Internal
   Load order: AFTER bootstrap.min.css, BEFORE dashboard.css
   ============================================================ */

/* ---- 1. Primitive scale ---- */
:root {
  /* Ink (neutral) */
  --c-ink-0:   #ffffff;
  --c-ink-50:  #f8fafc;
  --c-ink-100: #f1f5f9;
  --c-ink-200: #e2e8f0;
  --c-ink-300: #cbd5e1;
  --c-ink-500: #64748b;
  --c-ink-700: #334155;
  --c-ink-900: #0f172a;
  --c-ink-950: #0e1322;

  /* Brand: webe lime */
  --c-lime-50:  #f5f8d3;
  --c-lime-100: #e3e98a;
  --c-lime-300: #d6e046;
  --c-lime-500: #c2d107;
  --c-lime-700: #4a5102;

  /* Status / accent */
  --c-emerald-500: #10b981;
  --c-amber-500:   #f59e0b;
  --c-red-500:     #dc2626;
  --c-blue-500:    #3b82f6;
  --c-indigo-500:  #6366f1;
  --c-violet-500:  #8b5cf6;
  --c-orange-500:  #f97316;
  --c-sky-500:     #0ea5e9;
}

/* ---- 2. Semantic tokens (use these in components, not primitives) ---- */
:root {
  --app-surface:          var(--c-ink-50);
  --app-surface-raised:   var(--c-ink-0);
  --app-surface-sunken:   var(--c-ink-100);
  --app-border:           var(--c-ink-200);
  --app-text:             var(--c-ink-900);
  --app-text-muted:       var(--c-ink-500);
  --app-text-heading:     var(--c-ink-900);

  --app-accent:           var(--c-lime-500);
  --app-accent-emphasis:  var(--c-lime-700);
  --app-accent-subtle:    var(--c-lime-50);

  --app-status-ok:        var(--c-emerald-500);
  --app-status-warn:      var(--c-amber-500);
  --app-status-error:     var(--c-red-500);
  --app-status-syncing:   var(--c-blue-500);

  /* Sidebar (always dark, regardless of theme) */
  --sidebar-bg:           var(--c-ink-950);
  --sidebar-active-bg:    rgba(194, 209, 7, 0.15);
  --sidebar-active-text:  var(--c-lime-500);
  --sidebar-text:         #8b95a9;
  --sidebar-muted:        #6b7688;
  --sidebar-section:      #4a5568;
}

/* ---- 3. Map to Bootstrap so its components inherit the theme ---- */
:root {
  --bs-body-bg:           var(--app-surface);
  --bs-body-color:        var(--app-text);
  --bs-border-color:      var(--app-border);
  --bs-tertiary-bg:       var(--app-surface-sunken);
  --bs-emphasis-color:    var(--app-text-heading);
  --bs-secondary-color:   var(--app-text-muted);
  --bs-link-color:        var(--app-text-heading);
  --bs-link-hover-color:  var(--app-accent-emphasis);
  --bs-heading-color:     var(--app-text-heading);

  --bs-primary:           var(--c-lime-500);
  --bs-primary-rgb:       194, 209, 7;
  --bs-primary-text-emphasis: var(--c-lime-700);
  --bs-primary-bg-subtle:    var(--c-lime-50);
  --bs-primary-border-subtle: var(--c-lime-100);
}