/* ═══════════════════════════════════════════════════
   Concordia – Renderer Styles
   Brand: Indigo / Montserrat  (see branding/branding.md)
═══════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Dark theme (default) ──────────────────────── */
:root {
  --bg:                #0f0d2a;
  --surface0:          #1e1b4b;   /* Indigo 900 */
  --surface1:          #2e2a6a;
  --surface2:          #3730a3;   /* Indigo 700 */
  --overlay0:          #4f46e5;   /* Indigo 600 */
  --text:              #e0e7ff;   /* Indigo 100 */
  --subtext0:          #a5b4fc;   /* Indigo 300 */
  --subtext1:          #c7d2fe;   /* Indigo 200 */
  --primary:           #4f46e5;   /* Indigo 600 */
  --primary-hover:     #4338ca;   /* Indigo 700 */
  --primary-text:      #818cf8;   /* Indigo 400 */
  --red:               #f87171;
  --radius:            8px;
  --sidebar-w:         230px;
  --msg-hover:         rgba(255,255,255,0.04);
  --logo-filter:       brightness(0) invert(1);
  --server-sidebar-bg: #09081a;
  --pill-color:        #ffffff;
}

/* ─── Mono Dark theme ─────────────────────────────────────────── */
body.theme-mono-dark {
  --bg:                #111111;
  --surface0:          #1c1c1c;
  --surface1:          #2a2a2a;
  --surface2:          #3a3a3a;
  --overlay0:          #555555;
  --text:              #e8e8e8;
  --subtext0:          #9a9a9a;
  --subtext1:          #c0c0c0;
  --primary:           #777777;
  --primary-hover:     #606060;
  --primary-text:      #aaaaaa;
  --red:               #e05555;
  --msg-hover:         rgba(255,255,255,0.04);
  --logo-filter:       brightness(0) invert(1);
  --server-sidebar-bg: #0a0a0a;
  --pill-color:        #ffffff;
}

/* ─── Mono Light theme ────────────────────────────────────────── */
body.theme-mono-light {
  --bg:                #f9f9f9;
  --surface0:          #f0f0f0;
  --surface1:          #e0e0e0;
  --surface2:          #cccccc;
  --overlay0:          #999999;
  --text:              #161616;
  --subtext0:          #666666;
  --subtext1:          #444444;
  --primary:           #666666;
  --primary-hover:     #444444;
  --primary-text:      #555555;
  --red:               #cc3333;
  --msg-hover:         rgba(0,0,0,0.04);
  --logo-filter:       none;
  --server-sidebar-bg: #e8e8e8;
  --pill-color:        #666666;
}

html, body {
  height: 100%;
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  overflow: hidden;
}

/* ─── Utilities ─────────────────────────────────── */
.hidden { display: none !important; }
.screen { width: 100vw; height: 100vh; }