/* Design tokens — port the rest of styles.css from the prototype into
   per-feature files (chrome.css, home.css, vault.css, auth.css, modals.css)
   and import them where needed. */

:root,
[data-theme="dark"] {
  /* palette */
  --bg:       #0a0908;
  --bg-2:     #110f0c;
  --bg-3:     #16130f;
  --line:     #2a2520;
  --line-2:   #3a332b;
  --fg:       #f4ebd9;
  --fg-mute:  #b0a594;
  --fg-dim:   #8c7b6a; /* bumped from #6b6258 for 4.5:1 contrast on dark bg */
  --gold:     #c9a96e;
  --gold-dim: #8a7548;
  --gold-soft:#e3c98c;
  --danger:   #c97a6e;

  /* type */
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "DM Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

[data-theme="light"] {
  --bg:       #faf7f2;
  --bg-2:     #f2ece0;
  --bg-3:     #e8e0d2;
  --line:     #d8cebe;
  --line-2:   #c4b8a4;
  --fg:       #1c1510;
  --fg-mute:  #4a3f34;
  --fg-dim:   #5a4535; /* darkened from #8a7a68 for 4.5:1 contrast on light bg */
  --gold:     #9a7230;
  --gold-dim: #7a5820;
  --gold-soft:#b88a40;
  --danger:   #9a4a40;
}

* { box-sizing: border-box; }
html, body, #root { margin: 0; padding: 0; background: var(--bg); }
body {
  font-family: var(--sans);
  color: var(--fg);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; cursor: pointer; }
em { font-style: italic; }

/* ── Focus indicators (WCAG 2.4.7) ─────────────────────────────── */
*:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ── Skip navigation link (WCAG 2.4.1) ─────────────────────────── */
.skip-link {
  position: absolute;
  top: -9999px;
  left: 12px;
  background: var(--gold);
  color: var(--bg);
  padding: 10px 18px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
  z-index: 9999;
}
.skip-link:focus-visible {
  top: 12px;
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

/* tiny dev-only baseline so the scaffold has structure before chrome.css lands */
.dev-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 40px;
}
.dev-shell h1 {
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 400;
  margin: 0 0 8px;
}
.dev-shell h1 em { color: var(--gold); }
.dev-shell p { color: var(--fg-mute); }
.dev-shell nav {
  display: flex; gap: 14px;
  margin: 28px 0;
}
.dev-shell nav a {
  color: var(--gold);
  text-decoration: none;
  border: 1px solid var(--line-2);
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.dev-shell nav a:hover { border-color: var(--gold); }