/* ============================================================
   OMGQA — Quality Findings Platform
   Dark-first design system. Linear / GitHub / Vercel lineage,
   indigo accent carried over from MPoS purple family.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

/* ---------- Theme: DARK (default) ---------- */
:root,
[data-theme="dark"] {
  --bg:            #0C0D11;   /* app canvas */
  --bg-elev:       #121319;   /* sidebar / rails */
  --surface:       #16171E;   /* cards, panels */
  --surface-2:     #1C1D26;   /* nested surface, hover */
  --surface-3:     #232430;   /* inputs, chips */
  --overlay:       #14151B;   /* modal backdrop surface */

  --line:          rgba(255,255,255,0.08);
  --line-2:        rgba(255,255,255,0.05);
  --line-strong:   rgba(255,255,255,0.14);

  --fg-1:          #EDEEF2;   /* primary text */
  --fg-2:          #A6A8B3;   /* secondary */
  --fg-3:          #6E707C;   /* muted / placeholder */
  --fg-invert:     #0C0D11;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.45);
  --shadow-pop: 0 12px 40px rgba(0,0,0,0.55);
  --backdrop: rgba(6,7,10,0.66);
}

[data-theme="darker"] {
  --bg:            #060709;
  --bg-elev:       #0B0C10;
  --surface:       #0F1015;
  --surface-2:     #15161D;
  --surface-3:     #1B1C25;
  --overlay:       #0D0E13;
  --line:          rgba(255,255,255,0.07);
  --line-2:        rgba(255,255,255,0.04);
  --line-strong:   rgba(255,255,255,0.13);
  --fg-1:          #ECEDF1;
  --fg-2:          #989AA6;
  --fg-3:          #5E606C;
  --fg-invert:     #060709;
  --backdrop: rgba(0,0,0,0.72);
}

[data-theme="light"] {
  --bg:            #FBFBFC;
  --bg-elev:       #F4F4F6;
  --surface:       #FFFFFF;
  --surface-2:     #F6F6F8;
  --surface-3:     #EFEFF2;
  --overlay:       #FFFFFF;
  --line:          rgba(13,15,25,0.10);
  --line-2:        rgba(13,15,25,0.06);
  --line-strong:   rgba(13,15,25,0.16);
  --fg-1:          #16171E;
  --fg-2:          #5B5D6B;
  --fg-3:          #8A8C99;
  --fg-invert:     #FFFFFF;
  --shadow-1: 0 1px 2px rgba(13,15,25,0.06);
  --shadow-2: 0 4px 16px rgba(13,15,25,0.10);
  --shadow-pop: 0 12px 40px rgba(13,15,25,0.16);
  --backdrop: rgba(13,15,25,0.34);
}

:root {
  /* ---------- Accent (overridable by Tweaks) ---------- */
  --accent:        #5E6AD2;
  --accent-hover:  #6E7AE6;
  --accent-soft:   color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-line:   color-mix(in srgb, var(--accent) 42%, transparent);
  --accent-fg:     #FFFFFF;

  /* ---------- Severity ---------- */
  --sev-critical:  #F2555A;
  --sev-high:      #FF8A3D;
  --sev-medium:    #E5B636;
  --sev-low:       #57B6E5;
  --sev-none:      #6E707C;

  /* ---------- Status ---------- */
  --st-open:       #57B6E5;
  --st-triage:     #C792EA;
  --st-progress:   #E5B636;
  --st-review:     #FF8A3D;
  --st-resolved:   #38C793;
  --st-closed:     #6E707C;

  /* ---------- Semantic ---------- */
  --success:       #38C793;
  --warning:       #E5B636;
  --error:         #F2555A;
  --info:          #57B6E5;
  --ai:            #C792EA;   /* AI / agent purple */

  /* ---------- Type ---------- */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Radii ---------- */
  --r-xs: 5px;
  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* ---------- Spacing (4px base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;

  --sidebar-w: 232px;
  --topbar-h: 52px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg-1);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv01', 'cv03', 'ss01';
}

#root { height: 100%; }

::selection { background: var(--accent-soft); }

/* Scrollbars */
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--line-strong); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }

code, .mono { font-family: var(--font-mono); }

/* Utility */
.t-mono { font-family: var(--font-mono); }
.muted { color: var(--fg-2); }
.faint { color: var(--fg-3); }

/* Tooltip-ish focus ring */
:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 1px; }

/* Keyframes */
@keyframes om-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes om-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes om-slide-right { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes om-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes om-spin { to { transform: rotate(360deg); } }

.om-fade { animation: om-fade .2s ease both; }
.om-pop { animation: om-pop .18s cubic-bezier(.2,.7,.3,1) both; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}