/**
 * 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;
}