/*
  Design tokens ported from docs/frontend-style-guide.md ("Служебная
  панель" / backend-console style). Values are copied as specified there;
  don't invent new colors here -- add semantic status tokens instead (see
  the block below) if a new meaning is needed.
*/
:root {
  --background: #020617;
  --panel: #0b1120;
  --panel-raised: #0f172a;
  --border: #1e293b;
  --border-strong: #334155;
  --foreground: #e2e8f0;
  --foreground-bright: #f8fafc;
  --muted: #64748b;
  --muted-foreground: #94a3b8;
  --accent: #b91c1c;
  --accent-foreground: #fecaca;
  --gold: #a67c1e;
  --gold-foreground: #e8c877;
  --radius: 6px;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /*
    The style guide's own rule (section 1): --accent swaps per PAGE to
    match that page's single status meaning. A dashboard table showing
    many rows each with their own status needs several of those meanings
    on screen at once, which the single-swap model doesn't cover on its
    own. These three tokens use the exact color values the guide already
    assigns to danger/warning/success (section 1's palette) as standing,
    simultaneous badge variants, rather than one page-wide swap.
  */
  --status-danger: #b91c1c;
  --status-danger-foreground: #fecaca;
  --status-warning: #b45309;
  --status-warning-foreground: #fde68a;
  --status-ok: #15803d;
  --status-ok-foreground: #bbf7d0;

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

body {
  position: relative;
}

/* Three-layer background: solid + faint grid + radial glow (guide section 3). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(148, 163, 184, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 40%, transparent 90%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 45% at 50% 8%, rgba(185, 28, 28, 0.1), transparent 70%);
}

#app {
  position: relative;
  z-index: 1;
}