/*
 * ROARR Design System — Shared Theme
 * https://mc.roarr.app/theme/roarr-theme.css
 *
 * Single source of truth for all ROARR product colours, fonts, and tokens.
 * Consumed by: Mission Control, EPOS Mission Control, and future modules.
 *
 * To update: edit this file in roarr-mission-control/Website/public/theme/
 * Changes propagate to all consuming apps on next page load.
 */

/* ── Light Theme (default) ──────────────────────────────── */
:root,
[data-theme="roarr-light"] {
  color-scheme: light;

  /* Backgrounds */
  --roarr-bg-primary: #F4F1EC;
  --roarr-bg-secondary: #EAE6DF;
  --roarr-bg-tertiary: #DED9D0;
  --roarr-surface: #FFFFFF;
  --roarr-surface-raised: #FAFAF7;
  --roarr-surface-hover: #F0EFEA;

  /* Brand accents */
  --roarr-accent-green: #7CB518;
  --roarr-accent-green-dark: #6A9A14;
  --roarr-accent-green-light: #EBF5D0;
  --roarr-accent-orange: #F7941D;
  --roarr-accent-orange-light: #FEF3E2;
  --roarr-accent-gold: #FFD700;
  --roarr-accent-copper: #C54B9E;
  --roarr-purple: #7C3AED;
  --roarr-teal: #0891B2;

  /* Legacy aliases (used in MC codebase — maps to canonical names) */
  --roarr-accent-purple: var(--roarr-accent-green);
  --roarr-accent-pink: var(--roarr-accent-orange);

  /* Text */
  --roarr-text-primary: #1C1917;
  --roarr-text-secondary: #44403C;
  --roarr-text-muted: #78716C;
  --roarr-text-dim: #9E9E96;

  /* Status */
  --roarr-success: #059669;
  --roarr-warning: #D97706;
  --roarr-error: #DC2626;
  --roarr-info: #2563EB;

  /* Borders */
  --roarr-border: rgba(124, 181, 24, 0.12);
  --roarr-border-hover: rgba(124, 181, 24, 0.25);
  --roarr-border-solid: #DDD9D0;
  --roarr-border-light: #EBE8E0;

  /* Glass */
  --roarr-glass: rgba(255, 255, 255, 0.55);
  --roarr-glass-border: rgba(124, 181, 24, 0.15);

  /* Gradients */
  --roarr-gradient-fire: linear-gradient(135deg, #7CB518 0%, #F7941D 50%, #FFD700 100%);
  --roarr-gradient-fire-hover: linear-gradient(135deg, #8BC34A 0%, #F9A825 50%, #FFEB3B 100%);
  --roarr-gradient-subtle: linear-gradient(135deg, rgba(124,181,24,0.08) 0%, rgba(255,215,0,0.08) 100%);

  /* Glow */
  --roarr-glow-green: 0 0 15px rgba(124,181,24,0.25), 0 0 40px rgba(124,181,24,0.08);
  --roarr-glow-orange: 0 0 15px rgba(255,215,0,0.2), 0 0 40px rgba(255,215,0,0.06);
  --roarr-glow-fire: 0 0 20px rgba(124,181,24,0.2), 0 0 50px rgba(124,181,24,0.08), 0 0 80px rgba(255,215,0,0.04);

  /* Legacy glow alias */
  --roarr-glow-purple: var(--roarr-glow-green);

  /* Overlay & shadows */
  --roarr-overlay-bg: rgba(0, 0, 0, 0.5);
  --roarr-shadow-heavy: 0 24px 64px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--roarr-border);

  /* Typography */
  --roarr-font-heading: 'Gobold', 'Inter', system-ui, sans-serif;
  --roarr-font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --roarr-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  --roarr-font-display: 'Adventure', 'Gobold', system-ui, sans-serif;

  /* Spacing & radius */
  --roarr-radius-sm: 0.375rem;
  --roarr-radius-md: 0.5rem;
  --roarr-radius-lg: 0.75rem;
  --roarr-radius-xl: 1rem;
  --roarr-radius-2xl: 1.5rem;

  /* Layout */
  --roarr-header-height: 56px;
  --roarr-sidebar-width: 240px;

  /* Button RGB channels (for dynamic opacity in gradients) */
  --roarr-btn-accent-r: 124;
  --roarr-btn-accent-g: 181;
  --roarr-btn-accent-b: 24;
  --roarr-btn-mid-r: 247;
  --roarr-btn-mid-g: 148;
  --roarr-btn-mid-b: 29;
  --roarr-btn-end-r: 255;
  --roarr-btn-end-g: 215;
  --roarr-btn-end-b: 0;
}

/* ── Dark Theme ─────────────────────────────────────────── */
[data-theme="roarr"],
[data-theme="dark"] {
  color-scheme: dark;

  --roarr-bg-primary: #090909;
  --roarr-bg-secondary: #111111;
  --roarr-bg-tertiary: #1A1A1A;
  --roarr-surface: #1A1A1A;
  --roarr-surface-raised: #222222;
  --roarr-surface-hover: #2A2A2A;

  --roarr-text-primary: #F1F5F9;
  --roarr-text-secondary: #CBD5E1;
  --roarr-text-muted: #A8B8C8;
  --roarr-text-dim: #64748B;

  --roarr-success: #10B981;
  --roarr-warning: #F59E0B;
  --roarr-error: #EF4444;
  --roarr-info: #3B82F6;

  --roarr-border: rgba(255,255,255,0.08);
  --roarr-border-hover: rgba(255,255,255,0.15);
  --roarr-border-solid: #2A2A2A;
  --roarr-border-light: #333333;
  --roarr-glass: rgba(17, 17, 17, 0.85);
  --roarr-glass-border: rgba(255,255,255,0.07);

  --roarr-gradient-subtle: linear-gradient(135deg, rgba(124,181,24,0.15) 0%, rgba(255,215,0,0.15) 100%);
  --roarr-glow-green: 0 0 20px rgba(124,181,24,0.3);
  --roarr-glow-purple: var(--roarr-glow-green);
  --roarr-glow-orange: 0 0 20px rgba(255,215,0,0.3);
  --roarr-glow-fire: 0 0 30px rgba(124,181,24,0.2), 0 0 60px rgba(255,215,0,0.15);

  --roarr-overlay-bg: rgba(0, 0, 0, 0.6);
  --roarr-shadow-heavy: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--roarr-border);
}