/**
 * theme.css — Platform Design Tokens
 * Single source of truth for all colours across the platform.
 * Based on GrapesJS editor palette (purple-indigo navy).
 *
 * Usage: var(--primary), var(--surface-dark), etc.
 * Load BEFORE all other CSS in app.html and editor HTML files.
 */
:root {
  /* ── Brand Colours ── */
  --primary: #6c63ff;           /* Purple-indigo — hero brand colour (from GrapesJS) */
  --primary-hover: #5a52e0;     /* Darker on hover */
  --primary-light: #a5a0ff;     /* Lighter tint for accents */
  --primary-subtle: rgba(108, 99, 255, 0.1);  /* Backgrounds, highlights */
  --primary-border: rgba(108, 99, 255, 0.3);  /* Borders on hover states */

  /* ── Dark Surfaces (sidebar, dark panels) ── */
  --surface-darkest: #13131a;   /* Deepest background */
  --surface-dark: #1b1b2f;      /* Sidebar, dark cards */
  --surface-mid: #23233a;       /* Elevated dark panels */
  --surface-raised: #2d2d44;    /* Cards on dark background */

  /* ── Light Surfaces (main content, cards) ── */
  --bg-page: #f5f5f5;           /* Page background */
  --bg-card: #ffffff;           /* Card/panel background */
  --bg-hover: #fafafa;          /* Row/item hover */
  --bg-muted: #f0f0f0;          /* Muted backgrounds, disabled */

  /* ── Text ── */
  --text-primary: #1e1b4b;      /* Headings, strong text */
  --text-body: #312e81;         /* Body text */
  --text-secondary: #555570;    /* Supporting text */
  --text-muted: #9d9db5;        /* Placeholder, timestamps */
  --text-on-primary: #ffffff;   /* Text on primary-coloured backgrounds */
  --text-on-dark: #c0c0d0;      /* Text on dark surfaces */
  --text-on-dark-muted: #9d9db5; /* Secondary text on dark surfaces */

  /* ── Borders ── */
  --border: #e0e0e0;            /* Standard borders */
  --border-light: #e8e8e8;      /* Subtle dividers */
  --border-hover: #999999;      /* Borders on hover */

  /* ── Semantic Colours ── */
  --success: #22c55e;           /* Live, published, positive */
  --success-bg: #dcfce7;
  --success-text: #166534;
  --warning: #f59e0b;           /* Draft, pending */
  --warning-bg: #fef9c3;
  --warning-text: #854d0e;
  --danger: #ef4444;            /* Error, delete */
  --danger-hover: #dc3545;

  /* ── Buttons ── */
  --btn-primary-bg: var(--primary);
  --btn-primary-text: var(--text-on-primary);
  --btn-primary-hover: var(--primary-hover);
  --btn-secondary-bg: transparent;
  --btn-secondary-border: var(--border);
  --btn-secondary-hover-border: var(--primary);

  /* ── Misc ── */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-elevated: 0 4px 12px rgba(0,0,0,0.1);
  --transition: 0.2s ease;
}

/* ══════════════════════════════════════════════════════════════════════════
   A TOAST NEVER EATS A TAP — global, so the NEXT one is right by default
   ══════════════════════════════════════════════════════════════════════════

   Alex, 2026-08-07, after the course wizard's toast was found sitting invisibly
   over the primary button on mobile: *"when we create more toasts and things
   like that, will it automatically function correctly?"*

   It did not. There are SIXTEEN hand-rolled toast functions across
   src/public/js, each with its own element and lifecycle, and four toast styles
   had no pointer-events at all. Fixing them one at a time is a treadmill: the
   seventeenth would arrive broken.

   THE MECHANISM, stated once so nobody has to rediscover it: an element at
   `opacity: 0` is STILL HIT-TESTABLE. Only `display:none`, `visibility:hidden`
   and `pointer-events:none` remove it from hit-testing. A toast is
   position:fixed with a high z-index and is typically faded rather than
   removed, so a faded toast is an invisible sheet of glass over whatever sits
   underneath it — on a phone, usually the primary button. The symptom is a
   button that "does nothing", intermittently, and it cost three wrong fixes
   before the cause was found.

   WHY A BLANKET RULE IS SAFE HERE: a toast is the one overlay shape that is
   never a control. Checked before writing this — every apparent toast-click in
   the codebase (ads-onboarding.js:987, launch-studio.js:7106) is a toast being
   RAISED FROM a click, not receiving one. Hover-revealed controls that live at
   opacity 0 and MUST stay clickable (.st-del, .rc-item-tools, .pho-peek) are
   not toasts and are untouched by this selector.

   The second rule is the escape hatch: if a toast ever does carry an Undo
   button, the button still works. Container inert, controls live.

   ⚠️ This rule only reaches pages that load theme.css. The real safety net is
   tests/toast-never-eats-a-tap.test.js, which rules on EVERY stylesheet. */

[class*="toast"],
[class*="Toast"] { pointer-events: none; }

[class*="toast"] button, [class*="toast"] a,
[class*="toast"] input,  [class*="toast"] select,
[class*="toast"] textarea, [class*="toast"] [role="button"],
[class*="Toast"] button, [class*="Toast"] a { pointer-events: auto; }