/* ctrlc-ctrlv theme — neutral-dominant, green as accent only */

@import url('/lib/fonts/local-fonts.css?v=V10');

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s; }
a:hover { border-bottom-color: currentColor; }

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

:root {
  /* Warm neutral palette (tiny chroma toward 70° = faint warmth) */
  --n-0:   oklch(100%  0     0);
  --n-50:  oklch(98.5% 0.003 70);
  --n-100: oklch(96%   0.003 70);
  --n-150: oklch(94%   0.003 70);
  --n-200: oklch(91%   0.004 70);
  --n-300: oklch(83%   0.004 70);
  --n-500: oklch(55%   0.004 70);
  --n-700: oklch(35%   0.005 70);
  --n-900: oklch(18%   0.005 70);

  /* Accent green — used sparingly */
  --accent:      oklch(56% 0.14 155);
  --accent-hot:  oklch(46% 0.13 155);
  --accent-soft: oklch(96% 0.04 155);
  --danger:      oklch(55% 0.17 25);

  /* Light theme surface tokens */
  --bg:          var(--n-50);
  --bg-raised:   var(--n-0);
  --bg-sunken:   var(--n-100);
  --fg:          var(--n-900);
  --fg-muted:    var(--n-700);
  --fg-dim:      var(--n-500);
  --line:        var(--n-200);
  --line-strong: var(--n-300);

  --font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-editorial: 'Fraunces', 'Iowan Old Style', Georgia, serif;
}

[data-theme="dark"] {
  --n-0:   oklch(8%    0.003 70);
  --n-50:  oklch(10%   0.004 70);
  --n-100: oklch(13%   0.004 70);
  --n-150: oklch(16%   0.005 70);
  --n-200: oklch(22%   0.005 70);
  --n-300: oklch(30%   0.006 70);
  --n-500: oklch(60%   0.005 70);
  --n-700: oklch(78%   0.005 70);
  --n-900: oklch(94%   0.004 70);

  --accent:      oklch(72% 0.14 155);
  --accent-hot:  oklch(82% 0.13 155);
  --accent-soft: oklch(22% 0.06 155);

  --bg:          var(--n-50);
  --bg-raised:   var(--n-100);
  --bg-sunken:   var(--n-0);
  --fg:          var(--n-900);
  --fg-muted:    var(--n-700);
  --fg-dim:      var(--n-500);
  --line:        var(--n-200);
  --line-strong: var(--n-300);
}

/* Blank background — no grid, no noise. Element kept for API but inert. */
.grid-bg { display: none; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.015em; color: var(--fg); }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.2rem); line-height: 1.08; font-weight: 600; }
h2 { font-size: clamp(1.35rem, 2vw, 1.6rem); line-height: 1.2; }
h3 { font-size: 1rem; font-weight: 600; }
p  { margin: 0; }

.editorial, em.editorial {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

kbd {
  display: inline-block;
  padding: 1px 6px;
  font: 500 0.82em var(--font-mono);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--bg-raised);
  color: var(--fg-muted);
}
code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-sunken);
  color: var(--fg);
  padding: 1px 5px;
  border-radius: 3px;
}