/* =============================================================
   TutorMind design tokens — tm-tokens.css
   The single source of the design system's colours, type, radii and
   depth, in both themes (body.dark-mode). Loaded by every page:
     - public pages: tm-tokens.css + tm-ds.css (components)
     - chat (tutor_mysql.php): tm-tokens.css + tm-chat.css
   Brand colours mirror ui-overhaul.css :root.
   ============================================================= */

:root {
  /* Brand — identical to assets/css/ui-overhaul.css */
  --primary: #7C3AED;
  --primary-light: #A78BFA;
  --primary-dark: #5B21B6;
  --cta: #F59E0B;
  --cta-hover: #D97706;
  /* Correctness only — identical to assets/css/tm-widgets.css */
  --tm-good: #10b981;
  --tm-good-bg: rgba(16, 185, 129, 0.12);
  --tm-bad: #ef4444;
  --tm-bad-bg: rgba(239, 68, 68, 0.10);

  /* Surfaces (light). Canvas/stage values come from tm-loader.css. */
  --ds-canvas: #FAF9F6;
  --ds-surface: #ffffff;
  --ds-tint: #F5F3FF;
  --ds-ink: #1F2937;
  --ds-ink-2: #6b7280;
  --ds-line: #e5e7eb;
  --ds-ink-on-cta: #1F2937;
  --ds-accent-ink: var(--primary);

  /* Stage = the feature panels from the proposal (3D scenes, journey,
     subjects, auth). Follows the theme: lavender in light, deep in dark. */
  --ds-stage: #F5F3FF;
  --ds-stage-surface: #ffffff;
  --ds-stage-raised: #EDE9FE;
  --ds-stage-ink: #1F2937;
  --ds-stage-ink-2: #6b7280;
  --ds-stage-line: rgba(124, 58, 237, 0.14);
  --ds-stage-accent: var(--primary);
  --ds-stage-shadow: 0 30px 50px -30px rgba(91, 33, 182, 0.35);
  --ds-stage-spark: var(--primary-dark);
  --ds-stage-rung: rgba(91, 33, 182, 0.3);
  --ds-paper: #ffffff;

  /* Type */
  --ds-font-display: 'Funnel Display', 'Outfit', system-ui, sans-serif;
  --ds-font-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Shape — smaller radii than the proposal's pills */
  --ds-r-sm: 8px;
  --ds-r-md: 10px;
  --ds-r-lg: 14px;
  --ds-r-xl: 20px;

  /* Depth */
  --ds-edge: 4px;
  --ds-lift: 0 1px 2px rgba(31, 41, 55, 0.06), 0 14px 28px -16px rgba(31, 41, 55, 0.22);
  --ds-lift-hi: 0 2px 4px rgba(31, 41, 55, 0.06), 0 30px 50px -22px rgba(91, 33, 182, 0.4);
  --ds-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --ds-max: 1180px;
}

body.dark-mode {
  --ds-canvas: #16121F;
  --ds-surface: #1F1A2E;
  --ds-tint: #2a2440;
  --ds-ink: #EDE9F7;
  --ds-ink-2: #9ca3af;
  --ds-line: rgba(255, 255, 255, 0.1);
  --ds-accent-ink: var(--primary-light);
  --ds-lift: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 28px -16px rgba(0, 0, 0, 0.6);
  --ds-lift-hi: 0 2px 4px rgba(0, 0, 0, 0.3), 0 30px 50px -22px rgba(0, 0, 0, 0.8);

  --ds-stage: #1F1A2E;
  --ds-stage-surface: #2a2440;
  --ds-stage-raised: rgba(255, 255, 255, 0.07);
  --ds-stage-ink: #EDE9F7;
  --ds-stage-ink-2: #9ca3af;
  --ds-stage-line: rgba(255, 255, 255, 0.1);
  --ds-stage-accent: var(--primary-light);
  --ds-stage-shadow: 0 30px 50px -30px rgba(0, 0, 0, 0.7);
  --ds-stage-spark: #EDE9F7;
  --ds-stage-rung: rgba(255, 255, 255, 0.22);
  --ds-paper: #EDE9F7;
}