/* ==========================================================================
   Roboflight – color scheme & design tokens
   Basis: docs/mockups/colors.css ("Dark Ember & Cyan"), extended with status,
   game and team colors. All other stylesheets use ONLY these tokens.
   ========================================================================== */

:root
{
  --theme-name: "Dark Ember & Cyan (Orange & Turquoise)";

  /* 1. BACKGROUNDS */
  --bg-app: #0B0F14;            /* Outer page background */
  --bg-topbar: #10161F;         /* Top bar, panel headers */
  --bg-side-panel: #121822;     /* Side panels */
  --bg-main-panel: #18212E;     /* Main panel (lightened) */
  --bg-surface-subtle: #1E2938; /* Cards/boxes in panels */
  --bg-canvas: #070A0F;         /* Arena viewport, code editor */
  --bg-minimap: #05080C;        /* Minimap background */
  --bg-gutter: #0B0F14;         /* Line numbers in the editor */
  --bg-overlay-panel: rgba(16, 22, 31, 0.9);   /* Floating bars above the canvas */
  --bg-backdrop: rgba(6, 10, 15, 0.78);        /* Backdrop behind dialogs */
  --bg-hover-row: rgba(0, 180, 216, 0.06);     /* Table row on hover */

  /* 2. TEXT COLORS */
  --text-main: #E6EDF5;
  --text-muted: #8B9BB0;
  --text-faint: #4B5B70;        /* Line numbers, very subtle hints */
  --text-on-primary: #FFFFFF;
  --text-on-secondary: #06181E;
  --text-on-tertiary: #1B1303;

  /* 3. PRIMARY COLOR (solar orange) */
  --color-primary: #FF7A2F;
  --color-primary-hover: #E0631B;
  --color-primary-light: #2E1E17;

  /* 4. SECONDARY COLOR (ocean turquoise) */
  --color-secondary: #00B4D8;
  --color-secondary-hover: #22C7E8;
  --color-secondary-light: #102632;
  --color-secondary-text: #48CAE4;
  --color-secondary-border: rgba(0, 180, 216, 0.45);

  /* 5. TERTIARY COLOR (sun gold) */
  --color-tertiary: #F4C44E;
  --color-tertiary-light: #292315;
  --color-tertiary-text: #F7D479;

  /* 6. BORDERS & SHADOWS */
  --border-color: #263345;
  --border-strong: #3A4659;
  --shadow-main: 0 8px 30px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.35);

  /* 7. STATUS COLORS */
  --color-ok: #2ECC71;
  --color-ok-light: #12291D;
  --color-warn: #F4C44E;
  --color-warn-light: #292315;
  --color-danger: #FF5959;
  --color-danger-hover: #E64545;
  --color-danger-light: #2E1619;
  --color-danger-text: #FF8A8A;
  --color-info: #48CAE4;
  --color-info-light: #102632;
  --color-killed: #3A4659;      /* Badge of destroyed ships */
  --color-killed-text: #C77D7D;

  /* 8. GAME VALUES (shield / hull / heat / energy / overlays) */
  --color-shield: #00B4D8;
  --color-shield-active: #48CAE4;
  --color-hull: #2ECC71;
  --color-hull-warn: #FF7A2F;
  --color-hull-critical: #FF5959;
  --color-heat-low: #F4C44E;
  --color-heat-mid: #FF7A2F;
  --color-heat-high: #FF3B3B;
  --gradient-heat: linear-gradient(90deg, var(--color-heat-low), var(--color-heat-mid), var(--color-heat-high));
  --color-energy-drive: #F4C44E;
  --color-energy-shields: #00B4D8;
  --color-energy-weapon: #FF7A2F;
  --color-energy-target: #FFFFFF;
  --color-overlay-radar: #00B4D8;
  --color-overlay-optical: #F4C44E;
  --color-overlay-zone: #FF7A2F;
  --color-overlay-debug: #A855F7;

  /* 9. TEAM COLORS (8 skins, IDs as in js/shared/teamPalette.js) */
  --team-emerald: #2ECC71;
  --team-violet: #A855F7;
  --team-azure: #3D8BFF;
  --team-crimson: #FF4D5E;
  --team-amber: #F4C44E;
  --team-cyan: #22D3EE;
  --team-rose: #F472B6;
  --team-graphite: #9AA5B1;
  --text-on-team: #0B0F14;      /* Text on team color (all 8 colors are light enough) */

  /* 10. FONTS & SIZES */
  --font-ui: 'Segoe UI', Inter, Roboto, system-ui, -apple-system, sans-serif;
  --font-mono: 'Cascadia Code', 'Fira Code', Consolas, 'Courier New', monospace;
  --topbar-height: 54px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
}

/* Helper classes: set the team color as variable --team (for badges, borders, dots) */
.team-emerald { --team: var(--team-emerald); }
.team-violet { --team: var(--team-violet); }
.team-azure { --team: var(--team-azure); }
.team-crimson { --team: var(--team-crimson); }
.team-amber { --team: var(--team-amber); }
.team-cyan { --team: var(--team-cyan); }
.team-rose { --team: var(--team-rose); }
.team-graphite { --team: var(--team-graphite); }