/* ===== Design tokens ===== */
:root {
  --bg: oklch(0.18 0.005 240);
  --bg-1: oklch(0.21 0.006 240);
  --bg-2: oklch(0.24 0.007 240);
  --bg-3: oklch(0.28 0.008 240);
  --line: oklch(0.32 0.008 240);
  --line-soft: oklch(0.26 0.007 240);
  --fg: oklch(0.94 0.005 90);
  --fg-1: oklch(0.78 0.006 90);
  --fg-2: oklch(0.58 0.008 240);
  --fg-3: oklch(0.46 0.008 240);
  --accent: oklch(0.78 0.13 155);
  --accent-dim: oklch(0.55 0.10 155);
  --accent-bg: oklch(0.30 0.05 155 / 0.25);
  --warn: oklch(0.78 0.13 75);
  --info: oklch(0.78 0.10 230);
  --danger: oklch(0.72 0.16 25);

  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sans: 'Inter', system-ui, sans-serif;

  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
}

[data-theme="light"] {
  --bg: oklch(0.985 0.003 90);
  --bg-1: oklch(0.965 0.004 90);
  --bg-2: oklch(0.94 0.005 90);
  --bg-3: oklch(0.90 0.006 90);
  --line: oklch(0.84 0.006 90);
  --line-soft: oklch(0.90 0.005 90);
  --fg: oklch(0.22 0.008 240);
  --fg-1: oklch(0.36 0.008 240);
  --fg-2: oklch(0.50 0.008 240);
  --fg-3: oklch(0.62 0.008 240);
  --accent: oklch(0.55 0.13 155);
  --accent-dim: oklch(0.62 0.10 155);
  --accent-bg: oklch(0.85 0.07 155 / 0.5);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv11';
}

.mono { font-family: var(--mono); font-feature-settings: 'liga' off, 'calt' off; }

/* selection */
::selection { background: var(--accent-bg); color: var(--fg); }

/* scrollbar */
.scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll::-webkit-scrollbar-track { background: transparent; }
.scroll::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
.scroll::-webkit-scrollbar-thumb:hover { background: var(--line); border: 2px solid transparent; background-clip: padding-box; }

/* ===== Shared atoms ===== */
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.dot-green { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.dot-amber { background: var(--warn); }
.dot-red   { background: var(--danger); }

.kbd {
  font-family: var(--mono);
  font-size: 11px;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--fg-1);
  background: var(--bg-1);
}

.tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid var(--line);
  color: var(--fg-1);
  background: var(--bg-1);
  text-transform: lowercase;
  white-space: nowrap;
}
.tag.accent { color: var(--accent); border-color: var(--accent-dim); background: var(--accent-bg); }

.divider { height: 1px; background: var(--line-soft); width: 100%; }

/* underline link */
.uline { color: var(--fg); text-decoration: none; border-bottom: 1px dashed var(--fg-3); padding-bottom: 1px; transition: border-color .15s, color .15s; }
.uline:hover { color: var(--accent); border-color: var(--accent); }

/* blink */
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.blink { animation: blink 1.1s steps(1) infinite; }

/* shimmer for live demos */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.shimmer-bg {
  background: linear-gradient(90deg, transparent 0%, oklch(0.78 0.13 155 / 0.08) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}

/* gridlines */
.gridlines {
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 24px 24px;
}

.dotgrid {
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: -1px -1px;
}