/* =========================================================
   GradMate — Tokens + Bootstrap mapping (LIGHT + DARK)
   - Source of truth for colors, surfaces, radii, shadows
   - Works with:
     1) body.dark-mode  (your cookie system)
     2) html[data-bs-theme="dark"] (Bootstrap)
   ========================================================= */

/* -----------------------------
   1) Tokens (LIGHT) + Bootstrap mapping
------------------------------ */
:root{
  /* Brand (flashy but clean) */
  --brand-primary:   #1D4ED8;  /* deeper blue */
  --brand-secondary: #6D28D9;  /* deeper purple */
  --brand-accent:    #0891B2;  /* deeper cyan */

  /* Semantic */
  --brand-success: #22C55E;
  --brand-warning: #F59E0B;
  --brand-danger:  #EF4444;

  /* Surfaces */
  --app-bg:      #F9FAFB;
  --app-surface: #FFFFFF;
  --app-soft:    #F3F4F6;

  /* Text */
  --app-text:    #0F172A;
  --app-muted:   #64748B;

  /* UI */
  --app-border: rgba(15, 23, 42, 0.12);
  --app-radius: 16px;
  --app-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);

  /* Optional glow for CTAs (subtle) */
  --cta-glow: 0 18px 42px rgba(124, 58, 237, 0.22);

  /* -----------------------------
     Bootstrap mapping
  ------------------------------ */
  --bs-primary:   var(--brand-primary);
  --bs-secondary: var(--brand-secondary);
  --bs-success:   var(--brand-success);
  --bs-warning:   var(--brand-warning);
  --bs-danger:    var(--brand-danger);

  --bs-body-bg:    var(--app-bg);
  --bs-body-color: var(--app-text);

  --bs-border-color: var(--app-border);
  --bs-link-color: var(--brand-primary);
  --bs-link-hover-color: var(--brand-secondary);

  /* Makes Bootstrap corners nicer globally */
  --bs-border-radius: 0.9rem;
}

/* -----------------------------
   2) Tokens (DARK)
   Overrides only tokens (Bootstrap mapping uses tokens)
------------------------------ */
body.dark-mode,
html[data-bs-theme="dark"]{
  --app-bg:      #0B1220;
  --app-surface: #0F172A;
  --app-soft:    #111C33;

  --app-text:    #E5E7EB;
  --app-muted:   #94A3B8;

  --app-border: rgba(255, 255, 255, 0.10);
  --app-shadow: 0 14px 46px rgba(0, 0, 0, 0.45);

  --cta-glow: 0 22px 60px rgba(34, 211, 238, 0.14);
}