/* ══════════════════════════════════════════════════════════════
   DASHBOARD EXTENDED TOKENS
   Shared by instructor + student dashboards.
   Loaded AFTER Assets/Design/tokens.css (which provides the base).
   Role-specific overrides stay in each HTML file's <style>.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Extended Brand Colors ── */
  --rlgl-green-dark: #2E7D3A;
  --rlgl-yellow: #FFDB6E;
  --rlgl-yellow-dark: #C89D3B;
  --rlgl-yellow-light: #FFF8E6;
  --rlgl-brown: #853838;
  --rlgl-brand-green: #92D374;
  --rlgl-blue: #3B9FD9;
  --rlgl-purple: #E8D5F5;
  --rlgl-gold: #F5A623;
  --btn-dark-hover: #2a2d30;

  /* ── Status ── */
  --status-pending: var(--rlgl-yellow);
  --status-pending-bg: var(--rlgl-yellow-light);
  --status-completed: var(--rlgl-blue);
  --status-completed-bg: #E6F2FA;
  --status-invited: #B07FD0;
  --status-invited-bg: rgba(176,127,208,0.12);
  --status-invited-text: #8B5CB0;
  --status-review: #F5A623;
  --status-review-text: #b8860b;
  --status-review-warn: #FFF3E0;

  /* ── Semantic: Error ── */
  --error-text: #D32F2F;
  --error-bg: #FFF0F0;
  --error-border: #FFCDD2;

  /* ── Semantic: Stars / Ratings ── */
  --rating-star: #FFDB6E;
  --rating-star-gold: #F5A623;

  /* ── Admin Category Colors ── */
  --cat-green-text: #3a8a44;
  --cat-green-bg: #e4f5e8;
  --cat-green-dark: #2d8a4e;
  --cat-blue-text: #2a7ab5;
  --cat-blue-bg: #e4f0f9;
  --cat-amber-text: #b8860b;
  --cat-amber-dark: #8a6d0b;
  --cat-amber-bg: #fef6e4;
  --cat-amber-border: #f0e4c4;
  --cat-coral-bg: #fff1f1;
  --cat-approve-bg: #e8f5ea;

  /* ── Borders (extended) ── */
  --border-subtle: #EEF0F2;

  /* ── Surfaces (extended) ── */
  --bg-sidebar: #FAFBFB;

  /* ── Layout ── */
  --sidebar-width: 220px;
  --sidebar-collapsed: 64px;
  --topbar-height: 56px;

  /* ── Radius (extended) ── */
  --radius-xs: 6px;
  --radius-xl: 24px;

  /* ── Z-Index Scale ── */
  --z-content: 1;
  --z-sticky: 4;
  --z-topbar: 10;
  --z-sidebar: 20;
  --z-dropdown: 50;
  --z-popover: 60;
  --z-tooltip: 80;
  --z-modal: 100;
  --z-fab: 150;
  --z-slideout: 200;
  --z-slideout-panel: 201;
  --z-nested-modal: 300;
  --z-toast: 400;

  /* ── Spacing Scale (numeric names) ── */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;

  /* ── Elevation (4-level depth) ── */
  --elevation-0: none;
  --elevation-1: 0 2px 8px rgba(0,0,0,0.06);
  --elevation-2: 0 8px 24px rgba(0,0,0,0.12);
  --elevation-3: 0 12px 32px rgba(0,0,0,0.15);

  /* ── Focus Rings ── */
  --ring-coral: 0 0 0 3px rgba(255,102,110,0.18);

  /* ── Type Scale ── */
  --text-2xl: 24px;
  --text-xl: 18px;
  --text-lg: 16px;
  --text-base: 14px;
  --text-body: 13px;
  --text-sm: 12px;
  --text-xs: 11px;
  --text-2xs: 10px;
  --text-3xs: 9px;

  /* ── Gradients ── */
  --gradient-on-now: linear-gradient(135deg, var(--rlgl-green) 0%, var(--rlgl-green-mid) 60%, var(--rlgl-green-pale) 100%);

  /* ── Motion (dashboard names) ── */
  --motion-fast: 150ms ease;
  --motion-base: 200ms ease-out;
  --motion-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Shadows (extended) ── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.10);
  --shadow-pop: 0 8px 30px rgba(0,0,0,0.15);
}