/**
 * Shared design tokens — LMS + public auth
 * Consumed via CSS custom properties (no build step).
 */
:root {
  --font-sans: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Right 2 Thrive UK — logo palette: sky blue (wordmark), orange (“2” / tagline), green (UK / leaves) */
  --color-primary: #1b8eb8;
  --color-primary-hover: #157799;
  --color-primary-muted: #e3f5fc;

  --color-accent: #e8891f;
  --color-accent-hover: #c97410;

  --color-danger: #b91c1c;
  --color-danger-hover: #991b1b;

  --color-success: #2fa05a;
  --color-warning: #d97706;

  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-surface-muted: #f1f5f9;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;

  /* App canvas (behind main content) */
  --bg-canvas: #eceff3;
  --bg-canvas-accent: rgba(27, 142, 184, 0.07);
  --sidebar-bg: #ffffff;
  --sidebar-edge: rgba(15, 23, 42, 0.06);

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-on-primary: #ffffff;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 9999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 10px 28px rgba(15, 23, 42, 0.09);
  --shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.12);
  --shadow-inset-soft: inset 0 1px 0 rgba(255, 255, 255, 0.65);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;

  --header-tap-min: 44px;
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;

  --hub-wordmark-gradient: linear-gradient(
    105deg,
    #42b9e8 0%,
    #e8891f 48%,
    #2fa05a 100%
  );

  /* Logo wordmark (shared with LMS hub-ui) */
  --hub-wm-blue: #2a7ab8;
  --hub-wm-orange: #f0a318;
  --hub-wm-green: #45c96a;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0.01ms;
    --transition-base: 0.01ms;
  }
}

/* Bootstrap 4 class aliases — legacy PHP templates after upgrading CDN to v5 */
.text-left {
  text-align: left !important;
}
.text-right {
  text-align: right !important;
}
.float-left {
  float: left !important;
}
.float-right {
  float: right !important;
}
.ml-auto {
  margin-left: auto !important;
}
.mr-auto {
  margin-right: auto !important;
}
.pl-0 {
  padding-left: 0 !important;
}
.pr-0 {
  padding-right: 0 !important;
}