/* ═══════════════════════════════════════════════════════════
   MJR Collective AI — Design Tokens (single source of truth)
   Linked FIRST on every dashboard page, before style.css or
   any page-specific <style> block. The brand palette matches
   the marketing site (mjrcollectiveai.com).
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,600;1,700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root {
  /* ── Brand inks (page + panel backgrounds) ── */
  --ink:    #070b14;   /* page background */
  --ink-2:  #0c1220;   /* panels / cards */
  --ink-3:  #111827;   /* raised elements, inputs */

  /* Semantic surface aliases (used by the SPA + auth pages) */
  --bg:        var(--ink);
  --surface:   #0c1220;
  --surface-2: #111827;
  --surface-3: #1a2438;

  /* ── Brand gold ── */
  --gold:       #c9a96e;
  --gold-2:     #e3c990;
  --gold-light: #e3c990;                    /* alias of --gold-2 */
  --gold-dim:   rgba(201, 169, 110, 0.12);  /* translucent wash for chips/badges */

  /* ── Text ── */
  --text:       #f0ede8;
  --text-2:     #a8b3c4;
  --text-3:     #5c6b7f;
  --text-muted: #a8b3c4;   /* alias of --text-2 */
  --text-dim:   #5c6b7f;   /* alias of --text-3 */

  /* ── Borders ── */
  --border:        rgba(201, 169, 110, 0.2);
  --border-2:      rgba(201, 169, 110, 0.32);
  --border-subtle: rgba(255, 255, 255, 0.06);

  /* ── Status colors ── */
  --red:     #f87171;
  --error:   #f87171;   /* alias of --red */
  --danger:  #ef4444;
  --green:   #22c55e;
  --success: #22c55e;   /* alias of --green */
  --amber:   #fbbf24;
  --warning: #f59e0b;
  --blue:    #60a5fa;
  --info:    #3b82f6;
  --purple:  #a78bfa;

  /* ── Typography ── */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:  ui-monospace, 'SF Mono', Menlo, 'Cascadia Code', monospace;

  /* ── Layout ── */
  --radius:     8px;
  --radius-lg:  12px;
  --shadow:     0 4px 24px rgba(0, 0, 0, 0.4);
  --transition: 0.2s ease;
  --sidebar-w:  240px;
  --nav-h:      60px;

  /* Minimum edge of an interactive hit area (WCAG 2.5.5 / iOS HIG).
     Compact controls keep their painted size and grow the tap box only. */
  --tap:        44px;
  /* Narrowest a data table may be squeezed before .table-wrapper scrolls
     instead of crushing the columns. */
  --table-min:  720px;
}