/* Ximos /uno/ docs — theme matched to the product dashboard banner:
   near-black green background, bright mint accent, glass-panel cards. */

:root {
  --bg: #050B08;
  --bg-glow: radial-gradient(1200px 600px at 15% -10%, rgba(52,211,153,0.10), transparent 60%),
             radial-gradient(900px 500px at 100% 20%, rgba(52,211,153,0.06), transparent 55%);
  --surface: #0C1712;
  --surface-2: #0F1D17;
  --ink: #EAF3EC;
  --ink-soft: #93A9A0;
  --ink-faint: #5E7267;
  --line: #1C2B22;
  --line-soft: #142019;
  --accent: #34D399;
  --accent-strong: #22C583;
  --accent-ink: #0B0B0B;
  --accent-soft: rgba(52,211,153,0.12);
  --accent-border: rgba(52,211,153,0.35);
  --blue: #3B82F6;
  --warn: #F0B155;
  --warn-soft: rgba(240,177,85,0.12);
  --danger: #F0847A;
  --danger-soft: rgba(240,132,122,0.12);
  --code-bg: #08120D;
  --code-ink: #CFEFDD;
  --code-line: #16261D;
  --shadow: 0 8px 30px rgba(0,0,0,0.35);
}

/* Light mode kept as an accessible alternative, toggled explicitly */
html.light {
  --bg: #F6F8F5;
  --bg-glow: none;
  --surface: #FFFFFF;
  --surface-2: #EEF2ED;
  --ink: #10201A;
  --ink-soft: #46564D;
  --ink-faint: #7C8B82;
  --line: #DCE3DA;
  --line-soft: #E7ECE4;
  --accent: #15803D;
  --accent-strong: #116C33;
  --accent-ink: #FFFFFF;
  --accent-soft: #E4F3E9;
  --accent-border: #BFE3CD;
  --warn: #B45309;
  --warn-soft: #FBEEDD;
  --danger: #B42318;
  --danger-soft: #FBEAE8;
  --code-bg: #0F1E17;
  --code-ink: #D9F0E3;
  --code-line: #1E3A2C;
  --shadow: 0 1px 2px rgba(16,32,26,0.06);
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  background-image: var(--bg-glow);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .serif { font-family: 'Source Serif 4', Georgia, serif; }
code, .mono, table.data, .kv { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

a { color: var(--accent); text-decoration: none; }
a.underline-link { text-decoration: underline; text-underline-offset: 3px; }

.surface { background: var(--surface); border: 1px solid var(--line); }
.surface-2 { background: var(--surface-2); border: 1px solid var(--line-soft); }
.rule { border-color: var(--line); }

.pill {
  display: inline-flex; align-items: center; gap: .5em;
  border: 1px solid var(--accent-border); border-radius: 999px;
  padding: .3rem .85rem; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft); font-weight: 600;
}
.pill.plain { text-transform: none; letter-spacing: 0; color: var(--ink-soft); border-color: var(--line); background: transparent; font-weight: 500; }
.pill .dot { width: .4rem; height: .4rem; border-radius: 999px; background: var(--accent); }

.badge-good { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }
.badge-warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge-bad  { background: var(--danger-soft); color: var(--danger); border-color: transparent; }

.callout { border-left: 3px solid var(--accent); background: var(--accent-soft); padding: 1rem 1.25rem; border-radius: 0 .6rem .6rem 0; }
.callout.warn { border-left-color: var(--warn); background: var(--warn-soft); }
.callout.danger { border-left-color: var(--danger); background: var(--danger-soft); }

pre.code-block {
  background: var(--code-bg); color: var(--code-ink);
  border: 1px solid var(--code-line); border-radius: .7rem;
  padding: 1.1rem 1.2rem; overflow-x: auto; font-size: .82rem; line-height: 1.6;
}
pre.code-block .cm { color: #5E9A7C; }
pre.code-block .kw { color: #7FE3AE; }
pre.code-block .str { color: #E3C97E; }

table.data { width: 100%; border-collapse: collapse; font-size: .84rem; }
table.data th {
  text-align: left; font-weight: 600; color: var(--ink-soft);
  border-bottom: 1px solid var(--line); padding: .6rem .75rem;
  font-family: 'Inter', sans-serif; font-size: .72rem; letter-spacing: .03em; text-transform: uppercase;
}
table.data td { padding: .65rem .75rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.data tr:last-child td { border-bottom: none; }
table.data tr:hover td { background: rgba(52,211,153,0.03); }

.sidenav a { display: block; padding: .32rem 0; color: var(--ink-soft); font-size: .87rem; border-left: 2px solid transparent; padding-left: .85rem; }
.sidenav a:hover, .sidenav a.active { color: var(--ink); border-left-color: var(--accent); }
.sidenav p.label { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin: 1.1rem 0 .35rem .85rem; }
.sidenav p.label:first-child { margin-top: 0; }

.shot {
  border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; background: var(--surface);
}
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { padding: .7rem .9rem; font-size: .78rem; color: var(--ink-soft); border-top: 1px solid var(--line-soft); }
.shot figcaption.demo { color: var(--warn); }

::selection { background: var(--accent); color: #06120B; }

.theme-toggle {
  width: 2.15rem; height: 2.15rem; border-radius: 999px; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft); cursor: pointer; background: var(--surface);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--accent-border); }

.glow-card { box-shadow: var(--shadow); }