/* BuildEx Engine — Design tokens
   Premium enterprise compliance command-center.
   Dark navy/graphite, glass surfaces, cyan/azure data accents. */

:root {
  /* base depths */
  --bg-0: #060B14;          /* page void */
  --bg-1: #0A1322;          /* panel base */
  --bg-2: #0E1A2E;          /* raised */
  --bg-3: #122139;          /* hover */
  --bg-grid: rgba(56, 132, 209, 0.06);

  /* glass */
  --glass-bg: rgba(16, 28, 49, 0.55);
  --glass-bg-strong: rgba(20, 34, 58, 0.78);
  --glass-border: rgba(120, 170, 230, 0.10);
  --glass-border-strong: rgba(120, 170, 230, 0.18);
  --glass-inner: rgba(255, 255, 255, 0.03);

  /* foreground */
  --fg-0: #EAF2FF;          /* primary text */
  --fg-1: #B6C4DA;          /* secondary */
  --fg-2: #7C8BA5;          /* tertiary / labels */
  --fg-3: #4D5C77;          /* disabled / hint */
  --fg-mono: #C9D6EC;

  /* accents */
  --accent: #38BDF8;        /* cyan, primary data */
  --accent-2: #6AA6FF;      /* azure */
  --accent-glow: rgba(56, 189, 248, 0.35);
  --accent-soft: rgba(56, 189, 248, 0.12);

  /* status */
  --ok: #34D399;
  --ok-bg: rgba(52, 211, 153, 0.10);
  --ok-border: rgba(52, 211, 153, 0.35);

  --warn: #F5B544;
  --warn-bg: rgba(245, 181, 68, 0.10);
  --warn-border: rgba(245, 181, 68, 0.35);

  --err: #F87171;
  --err-bg: rgba(248, 113, 113, 0.10);
  --err-border: rgba(248, 113, 113, 0.35);

  --info: #7DD3FC;
  --info-bg: rgba(125, 211, 252, 0.08);

  /* type */
  --font-sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* radii / shadow */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 0 0 1px var(--glass-border), 0 10px 30px rgba(0,0,0,0.35);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.05) inset, 0 0 0 1px var(--glass-border-strong), 0 24px 60px rgba(0,0,0,0.45);

  /* density */
  --row-h: 44px;
  --pad-card: 20px;
}

[data-density="compact"] {
  --row-h: 36px;
  --pad-card: 14px;
}

[data-depth="graphite"] {
  --bg-0: #08090C;
  --bg-1: #111317;
  --bg-2: #161A20;
  --bg-3: #1C222B;
}

[data-depth="midnight"] {
  --bg-0: #03060F;
  --bg-1: #060D1C;
  --bg-2: #0A1428;
  --bg-3: #0F1D38;
}

/* base */
* { box-sizing: border-box; }
html, body, #root {
  margin: 0; padding: 0;
  height: 100%;
  background: var(--bg-0);
  color: var(--fg-0);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11", "tnum";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; }
input, textarea, select { font-family: inherit; color: inherit; }

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

/* utility */
.mono { font-family: var(--font-mono); font-feature-settings: "tnum","zero","ss01"; }
.hairline { background: linear-gradient(90deg, transparent, var(--glass-border-strong), transparent); height: 1px; width: 100%; }

/* glass surface */
.glass {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0) 30%),
    var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: var(--shadow-1);
}
.glass-strong {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 40%),
    var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  border-radius: var(--r-lg);
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  box-shadow: var(--shadow-2);
}

/* status pill */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid;
}
.pill-ok   { background: var(--ok-bg);   border-color: var(--ok-border);   color: var(--ok); }
.pill-warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn); }
.pill-err  { background: var(--err-bg);  border-color: var(--err-border);  color: var(--err); }
.pill-info { background: var(--info-bg); border-color: var(--glass-border-strong); color: var(--info); }
.pill-mute { background: rgba(120,140,170,0.06); border-color: var(--glass-border); color: var(--fg-2); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }

/* scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(120,140,170,0.15); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(120,140,170,0.28); border: 2px solid transparent; background-clip: padding-box; }

/* ambient page background */
.ambient {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1200px 600px at 18% -10%, rgba(56,189,248,0.10), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(106,166,255,0.08), transparent 60%),
    radial-gradient(700px 600px at 50% 110%, rgba(56,189,248,0.05), transparent 60%);
}
.grid-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 35%, black 40%, transparent 90%);
}

/* focus ring */
.focusable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }

/* keyframes used across components */
@keyframes pulse-soft { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0.25; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes flow-x { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes ticker {
  0% { transform: translateY(8px); opacity: 0; }
  20%, 80% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-8px); opacity: 0; }
}