/* ============================================================
   PredictZon — Admin Documentation
   Design tokens matching the backoffice admin panel theme.
   ============================================================ */
:root {
  /* --- Color: dark green/black base (matching backoffice) --- */
  --bg-canvas:      #050a08;
  --bg-surface:     #0c1110;
  --bg-elevated:    #111a17;
  --bg-code:        #0a1210;
  --border-subtle:  #1a2823;
  --border-strong:  #243a32;

  --text-primary:   #ffffff;
  --text-secondary: #b8c9c1;
  --text-tertiary:  #6b8a7d;

  /* Brand green (matching --brand-main: #008658) */
  --accent-green:        #008658;
  --accent-green-bright: #00a86c;
  --accent-green-dim:    #004d32;

  /* Signal colors for predictions */
  --signal-hit:      #34D399;
  --signal-pending:  #FBBF24;
  --signal-miss:     #F87171;
  --signal-hit-bg:     rgba(52,211,153,0.12);
  --signal-pending-bg: rgba(251,191,36,0.12);
  --signal-miss-bg:    rgba(248,113,113,0.12);

  /* Status colors */
  --color-success:   #13a10e;
  --color-danger:    #e02424;
  --color-warning:   #e88000;
  --color-info:      #004fd4;

  /* --- Type (matching backoffice DM Sans) --- */
  --font-display: 'DM Sans', 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'DM Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* --- Layout --- */
  --sidebar-w: 272px;
  --toc-w: 220px;
  --content-max: 780px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --shadow-elevated: 0 8px 24px rgba(0,0,0,0.4);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-canvas);
  background-image:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(0,134,88,0.08), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(0,134,88,0.05), transparent 55%);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-green-dim); color: var(--text-primary); }

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent-green-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

a { color: var(--accent-green-bright); text-decoration: none; }
a:hover { text-decoration: underline; }

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

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-green-dim); }