/* ============================================================================
   United Learn — Design System Tokens
   ----------------------------------------------------------------------------
   The single source of truth for the redesigned UI. Loaded globally (before
   styles.css) so every page/component can use these tokens + .ds-* component
   classes. Visual language: modern SaaS (soft surfaces, large radii, gentle
   shadows, gradient accents, near-black "ink" for primary actions/active nav)
   built on United Group's existing brand colours (blue / orange / green).
   ========================================================================== */

:root {
  /* — Brand (United Group) — */
  --ds-brand:        #1a71b0;   /* primary blue  (brand-600) */
  --ds-brand-strong: #095c98;   /* brand-700 */
  --ds-brand-soft:   #2a86c4;   /* brand-500 */
  --ds-orange:       #e85a1a;   /* tile */
  --ds-green:        #0fa36b;   /* acoustic */
  --ds-violet:       #6d3ff0;

  /* — Ink / neutrals (near-black primary, like the reference) — */
  --ds-ink:          #14161c;   /* primary buttons + active nav pill */
  --ds-ink-soft:     #232733;

  /* — Surfaces — */
  --ds-bg:           #f3f5f9;   /* app background */
  --ds-surface:      #ffffff;   /* cards / panels */
  --ds-surface-2:    #f7f9fc;   /* subtle inset / table header */
  --ds-border:       #e7ebf1;   /* hairline borders */
  --ds-border-soft:  #eef1f6;

  /* — Text — */
  --ds-text:         #14161c;
  --ds-text-muted:   #6b7280;
  --ds-text-subtle:  #9aa3af;
  --ds-on-accent:    #ffffff;

  /* — Accent gradients (for stat cards, charts, progress) — */
  --ds-grad-blue:   linear-gradient(135deg, #3a93d6 0%, #1a71b0 100%);
  --ds-grad-orange: linear-gradient(135deg, #ff8a4c 0%, #e85a1a 100%);
  --ds-grad-violet: linear-gradient(135deg, #9b6bff 0%, #6d3ff0 100%);
  --ds-grad-green:  linear-gradient(135deg, #19c08a 0%, #0a8355 100%);
  --ds-grad-pink:   linear-gradient(135deg, #ff6fae 0%, #e84393 100%);
  --ds-grad-ink:    linear-gradient(135deg, #2a2f3a 0%, #14161c 100%);

  /* — Radius — */
  --ds-r-sm:   10px;
  --ds-r-md:   14px;
  --ds-r-lg:   20px;
  --ds-r-xl:   26px;
  --ds-r-pill: 999px;

  /* — Shadows (soft, low-opacity, large blur) — */
  --ds-shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.05);
  --ds-shadow:    0 10px 30px -14px rgba(16,24,40,.22);
  --ds-shadow-lg: 0 28px 56px -28px rgba(16,24,40,.32);
  --ds-shadow-accent: 0 14px 30px -12px rgba(26,113,176,.45);

  /* — Motion — */
  --ds-ease: cubic-bezier(.16, 1, .3, 1);
  --ds-dur:  .18s;
}

/* Dark mode — keep the existing [data-theme="dark"] toggle working. */
[data-theme="dark"] {
  --ds-bg:          #0c1017;
  --ds-surface:     #151a22;
  --ds-surface-2:   #1b212b;
  --ds-border:      #232b36;
  --ds-border-soft: #1d242e;
  --ds-text:        #e7ecf3;
  --ds-text-muted:  #9aa4b2;
  --ds-text-subtle: #6b7686;
  --ds-ink:         #e7ecf3;       /* light pill on dark */
  --ds-on-accent:   #ffffff;
}

/* ── Surface / cards ──────────────────────────────────────────────────────── */
.ds-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-lg);
  box-shadow: var(--ds-shadow-sm);
}
.ds-card-pad { padding: 1.25rem; }
.ds-card-hover { transition: transform var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease); }
.ds-card-hover:hover { transform: translateY(-3px); box-shadow: var(--ds-shadow); }

/* Gradient accent surfaces (white text) */
.ds-grad           { color: var(--ds-on-accent); border: 0; }
.ds-grad.blue      { background-image: var(--ds-grad-blue); }
.ds-grad.orange    { background-image: var(--ds-grad-orange); }
.ds-grad.violet    { background-image: var(--ds-grad-violet); }
.ds-grad.green     { background-image: var(--ds-grad-green); }
.ds-grad.pink      { background-image: var(--ds-grad-pink); }
.ds-grad.ink       { background-image: var(--ds-grad-ink); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; font-size: .875rem; line-height: 1;
  padding: .625rem 1rem; border-radius: var(--ds-r-pill);
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease), background var(--ds-dur), opacity var(--ds-dur);
  white-space: nowrap;
}
.ds-btn:active { transform: translateY(1px); }
.ds-btn-primary { background: var(--ds-ink); color: #fff; box-shadow: var(--ds-shadow-sm); }
[data-theme="dark"] .ds-btn-primary { color: #0c1017; }
.ds-btn-primary:hover { box-shadow: var(--ds-shadow); }
.ds-btn-brand   { background: var(--ds-brand); color: #fff; }
.ds-btn-brand:hover { background: var(--ds-brand-strong); }
.ds-btn-ghost   { background: var(--ds-surface); color: var(--ds-text); border-color: var(--ds-border); }
.ds-btn-ghost:hover { background: var(--ds-surface-2); }
.ds-btn-sm { padding: .4rem .75rem; font-size: .8rem; }

/* ── Badges / status pills ────────────────────────────────────────────────── */
.ds-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 600; line-height: 1;
  padding: .3rem .6rem; border-radius: var(--ds-r-pill);
}
.ds-badge .dot { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.ds-badge-success { background: rgba(15,163,107,.12);  color: #0a8355; }
.ds-badge-warn    { background: rgba(232,90,26,.12);   color: #c2410c; }
.ds-badge-info    { background: rgba(26,113,176,.12);  color: #1a71b0; }
.ds-badge-violet  { background: rgba(109,63,240,.12);  color: #6d3ff0; }
.ds-badge-neutral { background: rgba(20,22,28,.06);    color: #4b5563; }
.ds-badge-frost   { background: rgba(255,255,255,.22); color: #fff; backdrop-filter: blur(4px); }

/* Glowing solid status pills — vivid fill + a soft colored halo + a bright dot.
   Used on the learner course catalog so each card's status reads at a glance,
   even over the dark course hero. Color is set per-variant; --glow drives the halo. */
.ds-badge-glow {
  color: #fff; font-weight: 700;
  /* Omnidirectional colored bloom (no offset, positive spread) so it reads as a
     halo, not a drop shadow — layered tight+wide for a soft glowing edge. */
  box-shadow: 0 0 0 1px rgba(255,255,255,.18),
              0 0 6px 0 var(--glow, rgba(0,0,0,.5)),
              0 0 12px 1px var(--glow, rgba(0,0,0,.5));
}
.ds-badge-glow .dot { background: rgba(255,255,255,.95); box-shadow: 0 0 4px rgba(255,255,255,.7); }
.ds-badge-live    { background: #16a34a; --glow: rgba(22,163,74,.55);  }  /* completed — green  */
.ds-badge-active  { background: #2f6df6; --glow: rgba(47,109,246,.55); }  /* in progress — blue */
.ds-badge-pending { background: #f59e0b; --glow: rgba(245,158,11,.55); }  /* retake — amber     */
.ds-badge-ghost   { background: rgba(255,255,255,.95); color: #1f2937; --glow: rgba(255,255,255,.4); }
.ds-badge-ghost .dot { background: #9ca3af; box-shadow: none; }

/* ── Inputs ───────────────────────────────────────────────────────────────── */
.ds-input {
  width: 100%; background: var(--ds-surface); color: var(--ds-text);
  border: 1px solid var(--ds-border); border-radius: var(--ds-r-md);
  padding: .6rem .85rem; font-size: .9rem;
  transition: border-color var(--ds-dur), box-shadow var(--ds-dur);
}
.ds-input::placeholder { color: var(--ds-text-subtle); }
.ds-input:focus { outline: none; border-color: var(--ds-brand); box-shadow: 0 0 0 3px rgba(26,113,176,.15); }

/* ── Sidebar nav ──────────────────────────────────────────────────────────── */
.ds-nav-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ds-text-subtle); padding: 0 .75rem; }
.ds-nav-item {
  display: flex; align-items: center; gap: .75rem; width: 100%;
  padding: .7rem .8rem; border-radius: var(--ds-r-md);
  font-size: .95rem; font-weight: 500; color: var(--ds-text-muted);
  text-align: left; transition: background var(--ds-dur), color var(--ds-dur);
}
.ds-nav-item:hover { background: var(--ds-surface-2); color: var(--ds-text); }
.ds-nav-item.is-active { background: var(--ds-ink); color: #fff; font-weight: 600; box-shadow: var(--ds-shadow-sm); }
[data-theme="dark"] .ds-nav-item.is-active { color: #0c1017; }

/* Text / initials sitting on a --ds-ink fill. In dark mode --ds-ink becomes a
   light pill, so the content must flip to near-black to stay legible (same
   behaviour as .ds-btn-primary and the active nav pill). */
.ds-on-ink { color: #fff; }
[data-theme="dark"] .ds-on-ink { color: #0c1017; }

/* ── Misc helpers ─────────────────────────────────────────────────────────── */
.ds-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ds-text-subtle); }
.ds-divider { height: 1px; background: var(--ds-border); border: 0; }
.ds-soft-grid { background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.5) 1px, transparent 0); background-size: 22px 22px; }