/* SkillUP Shared Design Tokens — Django's own copy.
 * ─────────────────────────────────────────────────
 * Deliberately named --dj-* rather than --su-* (which the React micro-apps
 * use): pages built around base_app.html also unconditionally load chat.css
 * (via the persistent AI sidebar) and, on some pages, concept-map.css /
 * playbook-editor.css — each is its OWN Tailwind v4 build with its own
 * baked-in `:root { --su-brand: ... }` from its build-time import of
 * shared/design-system/tokens.css. If this file used the same --su-* names,
 * whichever of those stylesheets happened to load later in the document
 * would silently win the cascade (plain, non-important same-specificity
 * :root rules resolve by source order) and override this file regardless of
 * include order upstream. A distinct namespace sidesteps that entirely —
 * no collision is possible since nothing else declares --dj-*.
 *
 * Values are kept in sync by hand with
 * SkillUP_front_mocks/shared/design-system/tokens.css's --su-brand/--su-accent/
 * etc — same palette, independent name.
 */

:root {
  /* ── Brand ── */
  --dj-brand: #312f33;
  --dj-accent: #ffbb33;
  --dj-cta: #3377FF;

  /* ── Surfaces — light ── */
  --dj-bg-light: #f8f9fa;
  --dj-card-light: #ffffff;

  /* ── Surfaces — dark ── */
  --dj-bg-dark: #353639;
  --dj-card-dark: #434343;

  /* ── Status ── */
  --dj-success: #10b981;
}

/* Primary CTAs use the coral action color, while black remains the primary
 * brand token for navigation, selected states, and other UI chrome. */
:where(button, a, input[type="submit"]).bg-app-brand.text-white,
.dark :where(button, a, input[type="submit"]).dark\:bg-app-accent.text-white {
  background-color: var(--dj-cta) !important;
  color: #ffffff !important;
}