/* Kurio's website: the Darkroom, carried from the app (DESIGN.app.md).
   One amber safelight with fixed meanings (edge, active, focus, kept, primary action), warm graphite,
   1px seams, no shadows, 2–3px corners, system faces, tabular figures. */

:root {
  --wall: #0f0e0d;
  --panel: #151311;
  --panel-2: #1c1a17;
  --seam: #26231f;
  --seam-2: #34302a;
  --seam-3: #4a443c;
  --ink: #ece7df;
  --ink-2: #b9b2a7;
  --ink-3: #8f887d;
  --safelight: #e8902a;
  --safelight-bright: #f29e3c;
  --steel: #8a8378;
  --bad: #d0644a;
  --display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "SF Pro Display", sans-serif;
  --text: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "SF Pro Text", sans-serif;
  --mono: "Cascadia Mono", Consolas, ui-monospace, "SF Mono", monospace;
  --gutter: clamp(16px, 4.4vw, 64px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--wall);
  color: var(--ink);
  font: 400 16px/1.55 var(--text);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--safelight); color: var(--wall); }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--seam-3); }
a:hover { text-decoration-color: var(--ink-2); }
:focus-visible { outline: 2px solid var(--safelight); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
kbd {
  font: 400 12px/1 var(--mono); color: var(--ink-2);
  border: 1px solid var(--seam-2); border-radius: 3px; padding: 3px 5px; background: var(--panel);
}
html { scrollbar-color: var(--seam-2) var(--wall); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--wall); }
::-webkit-scrollbar-thumb { background: var(--seam-2); border-radius: 5px; border: 2px solid var(--wall); }

.wordmark { font: 600 20px/1 var(--display); letter-spacing: -0.01em; text-decoration: none; color: var(--ink); }
.wordmark b { color: var(--safelight); font-weight: 600; }

/* ---- controls ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: 3px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--seam-2);
  font: 600 15px/1.2 var(--text); text-decoration: none; cursor: pointer;
  transition: border-color .15s, background-color .15s;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.btn:hover { border-color: var(--seam-3); }
.btn.primary { background: var(--safelight); border-color: var(--safelight); color: var(--wall); }
.btn.primary:hover { background: var(--safelight-bright); border-color: var(--safelight-bright); }
.btn.ghost { background: transparent; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: default; }
.btn svg { width: 18px; height: 18px; flex: none; }
.link-btn { background: none; border: 0; padding: 0; color: var(--ink-2); font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--seam-3); text-underline-offset: 3px; }
.link-btn:hover { color: var(--ink); }

.field { display: grid; gap: 6px; }
.field label { font: 400 13px/1.3 var(--text); color: var(--ink-2); }
.input {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 3px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--seam-2);
  font: 400 16px/1.3 var(--text); /* 16px: phones don't zoom the page */
  caret-color: var(--safelight);
}
.input::placeholder { color: var(--ink-3); }
.input:hover { border-color: var(--seam-3); }
.input:focus { outline: 2px solid var(--safelight); outline-offset: 1px; border-color: var(--seam-3); }
.hint { font-size: 13px; color: var(--ink-3); }

.label {
  font: 400 11px/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.notice { font-size: 14px; color: var(--ink-2); border: 1px solid var(--seam-2); border-radius: 3px; padding: 12px 14px; background: var(--panel); }
.notice.bad { border-color: var(--bad); color: var(--ink); }
.notice.ok { border-color: var(--seam-3); }
[hidden] { display: none !important; }

/* ---- outbox (local only) ---- */
.outbox { max-width: 760px; margin: 0 auto; padding: 40px var(--gutter); display: grid; gap: 20px; }
.outbox article { border-top: 1px solid var(--seam); padding-top: 16px; }
.outbox pre { white-space: pre-wrap; font: 400 14px/1.5 var(--mono); color: var(--ink-2); }
.meta { font-size: 13px; color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}