/* Cipi paper design system — light + dark
   New tokens (--ink, --paper, --signal, …) plus legacy aliases
   (--bg, --text, --accent, …) for existing markup. */

:root {
  --sans: "Source Sans 3", Georgia, sans-serif;
  --display: "Space Grotesk", var(--sans);
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-body: var(--sans);
  --font-display: var(--display);
  --font-mono: var(--mono);
  --max: 1120px;
  --radius: 0;
  --radius-sm: 0;
  --sidebar-width: 240px;
  --nav-height: 3.6rem;
  --docs-sidebar: 220px;
}

[data-theme="light"] {
  --ink: #14171e;
  --ink-soft: #2a3040;
  --muted: #5c6575;
  --line: #c8cfd9;
  --paper: #e9edf2;
  --surface: #f4f6f9;
  --white: #ffffff;
  --signal: #65a30d;
  --signal-deep: #4d7c0f;
  --phosphor: #a3e635;
  --terminal: #14171e;
  --pass: #1a7f4b;

  --bg: var(--paper);
  --bg-warm: var(--surface);
  --bg-card: var(--white);
  --text: var(--ink);
  --text-secondary: var(--ink-soft);
  --text-muted: var(--muted);
  --accent: var(--signal);
  --accent-light: #84cc16;
  --border: var(--line);
  --border-light: #d5dbe4;
  --code-bg: var(--terminal);
  --code-text: #d7dde6;
  --code-accent: var(--phosphor);
  --code-comment: #6b7482;
  --code-string: #86efac;
  --code-keyword: #c4b5fd;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --nav-bg: rgba(244, 246, 249, 0.88);
  --sidebar-bg: var(--surface);
  --tag-bg: rgba(101, 163, 13, 0.1);
  --atmosphere-signal: rgba(101, 163, 13, 0.12);
  --atmosphere-ink: rgba(20, 23, 30, 0.06);
  --grid-line: rgba(20, 23, 30, 0.035);
}

[data-theme="dark"] {
  --ink: #f4f4f5;
  --ink-soft: #c4c8d0;
  --muted: #9ca3af;
  --line: #2a2d36;
  --paper: #0c0d10;
  --surface: #14151a;
  --white: #1a1c22;
  --signal: #a3e635;
  --signal-deep: #84cc16;
  --phosphor: #bef264;
  --terminal: #08090c;
  --pass: #34d399;

  --bg: var(--paper);
  --bg-warm: var(--surface);
  --bg-card: var(--white);
  --text: var(--ink);
  --text-secondary: var(--ink-soft);
  --text-muted: var(--muted);
  --accent: var(--signal);
  --accent-light: var(--phosphor);
  --border: var(--line);
  --border-light: #1e2129;
  --code-bg: var(--terminal);
  --code-text: #d7dde6;
  --code-accent: var(--phosphor);
  --code-comment: #6b7482;
  --code-string: #86efac;
  --code-keyword: #c4b5fd;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --nav-bg: rgba(12, 13, 16, 0.88);
  --sidebar-bg: #0e0f13;
  --tag-bg: rgba(163, 230, 53, 0.12);
  --atmosphere-signal: rgba(163, 230, 53, 0.1);
  --atmosphere-ink: rgba(244, 244, 245, 0.04);
  --grid-line: rgba(244, 244, 245, 0.04);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  font-size: 16px;
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background 0.25s, color 0.25s;
}

a {
  color: inherit;
}

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

.atmosphere,
.scan-field {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 10% -10%, var(--atmosphere-signal), transparent 55%),
    radial-gradient(ellipse 60% 40% at 90% 18%, var(--atmosphere-ink), transparent 50%),
    linear-gradient(180deg, var(--surface) 0%, var(--paper) 40%, var(--paper) 100%);
}

.atmosphere::after,
.scan-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes scan {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(40px);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}