/* Cloudbase design system — recreated from design_handoff_cloudbase §5 (the "sky" palette).
   Fonts: Fraunces (display), Lora (prose/UI), Share Tech Mono (labels), JetBrains Mono (figures).
   The amber/parchment variant is retired. Two themes, same token names — light ("paper") and dark
   ("night flight"); dark is applied automatically from the OS (prefers-color-scheme), with a .night
   class as a manual override and :root.theme-light to force light. Only the values swap. */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Lora:wght@400;500;600&family=Share+Tech+Mono&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  --surface: #ffffff; --surface-sunk: #f4f6fb; --surface-quiet: #f9fbff;
  --warm-paper: #fdf9f1; --warm-line: #ece2d0; --warm-sunk: #f5eede; --warm-quiet: #faf4e8;
  --accent-wash: #eaf0ff;
  --line: #d8e0ee; --line-quiet: #eef2f8; --line-strong: #b9c7de;
  --ink: #11203b; --ink-body: #33415c; --ink-quiet: #5a6b86; --ink-faint: #8b9ab3;
  --accent: #1d4ed8; --accent-2: #8fb0ff; --accent-line: #c7d5f5;
  --ok: #1c7a4d; --warn: #a06a00; --warn-line: #f0d9a8; --warn-wash: #fdf8ee;
  --bad: #a04a3d; --bad-signal: #cc3322; --bad-wash: #fdf1ee; --bad-line: #f0c8c0;
  --serif: "Fraunces", Georgia, serif;
  --prose: "Lora", Georgia, serif;
  --mono: "Share Tech Mono", ui-monospace, monospace;
  --fig: "JetBrains Mono", ui-monospace, monospace;
  --shadow-pop: 0 8px 28px rgba(17,32,59,0.16);
  --shadow-modal: 0 12px 40px rgba(17,32,59,0.22);
}

/* Dark — "night flight" (design token board). Same names, only the values swap; nothing about
   the layout moves. Applied automatically to the OS setting, and via .night for a manual toggle.
   Depth in dark is a hairline + a wash, never a drop shadow. */
.night {
  --surface: #111820; --surface-sunk: #0d1117; --surface-quiet: #141c26;
  --warm-paper: #191510; --warm-line: #2b2318; --warm-sunk: #12100b; --warm-quiet: #1f1a12;
  --accent-wash: #16283c;
  --line: #1e2830; --line-quiet: #243444; --line-strong: #3a5470;
  --ink: #f4f6fb; --ink-body: #d8e0ee; --ink-quiet: #8b9ab3; --ink-faint: #5f7590;
  --accent: #2f9bff; --accent-2: #8fb0ff; --accent-line: #3a5470;
  --ok: #4dbb6a; --warn: #f5b332; --warn-line: #4a3d22; --warn-wash: #1a160e;
  --bad: #cc3322; --bad-signal: #cc3322; --bad-wash: #241310; --bad-line: #4a241e;
  --shadow-pop: none; --shadow-modal: none;
}
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    --surface: #111820; --surface-sunk: #0d1117; --surface-quiet: #141c26;
    --warm-paper: #191510; --warm-line: #2b2318; --warm-sunk: #12100b; --warm-quiet: #1f1a12;
    --accent-wash: #16283c;
    --line: #1e2830; --line-quiet: #243444; --line-strong: #3a5470;
    --ink: #f4f6fb; --ink-body: #d8e0ee; --ink-quiet: #8b9ab3; --ink-faint: #5f7590;
    --accent: #2f9bff; --accent-2: #8fb0ff; --accent-line: #3a5470;
    --ok: #4dbb6a; --warn: #f5b332; --warn-line: #4a3d22; --warn-wash: #1a160e;
    --bad: #cc3322; --bad-signal: #cc3322; --bad-wash: #241310; --bad-line: #4a241e;
    --shadow-pop: none; --shadow-modal: none;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--surface-sunk); color: var(--ink-body);
  font-family: var(--prose); font-size: 16px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--ink); line-height: 1.15;
  letter-spacing: -0.015em; margin: 0; }

/* mono label — uppercase + tracked (§5.4). // prefix + · separators are house style. */
.label { font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--ink-quiet); }
.fig { font-family: var(--fig); font-variant-numeric: tabular-nums; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }

.btn { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em;
  padding: 11px 20px; border-radius: 3px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-quiet); cursor: pointer; display: inline-block; transition: border-color .15s, background .15s; }
.btn:hover { border-color: var(--line-strong); }
.btn-accent, a.btn-accent, button.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-accent:hover, a.btn-accent:hover { background: #1740b0; border-color: #1740b0; color: #fff; }

/* the 2px left accent rule = "this is live / this is a note" (§5.5) */
.live-rule { border-left: 2px solid var(--accent); }

input, textarea { font-family: var(--prose); font-size: 15px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 3px; padding: 10px 12px; width: 100%; }
input:focus, textarea:focus { outline: none; border-color: var(--accent); }
input::placeholder { color: var(--ink-faint); }