/* Theme base (tokens) — Mosaico
   - Define design tokens and semantic CSS variables.
   - Theme files override colors/gradients/shadows.
   - Accent color can be overridden at runtime via CSS variables.
*/
:root{
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --radius: 16px;
  --radius-sm: 12px;

  /* Semantic colors (overridden by theme_dark/theme_light) */
  --bg: #0b0c10;
  --card: rgba(255,255,255,0.04);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.70);
  --border: rgba(255,255,255,0.12);
  --panel: rgba(255,255,255,0.04);

  /* Accent & status */
  --accent: #7c5cff;
  --accent-600: #6a4cf0;
  --primary: var(--accent);
  --primary-600: var(--accent-600);

  --danger: #ef4444;
  --danger-600:#dc2626;
  --success: #10b981;
  --success-600:#059669;
  --warn: #f59e0b;

  /* Shadows and focus ring (themes may override) */
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --shadow-sm: 0 6px 18px rgba(0,0,0,.28);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.35);
  --ring-color: rgba(124,92,255,.22);
  --ring: 0 0 0 4px var(--ring-color);

  /* Derived accent glows (may be overridden inline) */
  --accent-glow: rgba(124,92,255,0.80);
  --accent-glow-2: rgba(124,92,255,0.60);
  --accent-weak: rgba(124,92,255,0.20);

  /* Surfaces */
  --topbar-bg: rgba(18,20,26,0.80);
  --code-bg: #0b1220;
  --code-fg: #e5e7eb;

  /* Overlays (modals) */
  --overlay: rgba(0,0,0,0.62);

  /* App backgrounds (themes override) */
  --app-body-bg: radial-gradient(1200px 600px at 20% 0%, #15172a 0%, #0b0c10 60%);
  --viewer-bg: #0f1117;
  --viewer-fg: rgba(255,255,255,0.92);
  --viewer-muted: rgba(255,255,255,0.62);

  /* Mosaic canvas */
  --mosaic-canvas-bg: #0f1117;
  --mosaic-grid: rgba(255,255,255,0.06);
  --mosaic-placeholder: rgba(255,255,255,0.20);
  --crop-bg: #0b0c10;

  /* Overlays */
  --overlay: rgba(0,0,0,0.62);
}

/* Global defaults */
html,body{ font-family: var(--font-sans); }