/* Noumi — the website's shared look (index.html, account.html).
   Warm and quiet: the cream of the app icon's arch, the amber of its orb, and ink for everything that
   has to be read. One accent, used sparingly. Light and dark are each chosen, not flipped. */

:root {
  --bg: #FBF8F2;
  --surface: #FFFFFF;
  --surface-soft: #F5F0E6;
  --surface-sunk: #EFE8DA;
  --ink: #1F1A14;
  --body: #3D362D;
  --muted: #6E655A;
  --faint: #8F8576;
  --line: #EAE3D6;
  --line-strong: #D8CFBF;
  --amber: #A8651F;          /* the accent, and the one chart colour (validated vs both surfaces) */
  --amber-soft: #F6EBDB;
  --amber-ink: #7A4512;      /* amber text on light surfaces (AA) */
  --on-ink: #FFFFFF;
  --danger: #B3261E;
  --danger-soft: #FBEAE8;
  --success: #2E7D5B;
  --success-soft: #E6F2EC;
  --shadow-1: 0 1px 2px rgba(31, 26, 20, .05), 0 4px 14px rgba(31, 26, 20, .05);
  --shadow-2: 0 2px 6px rgba(31, 26, 20, .06), 0 18px 48px rgba(31, 26, 20, .10);
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --maxw: 1120px;
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mark-bg: linear-gradient(140deg, #D2A458 0%, #B97A33 55%, #94531A 100%);
  --mark-arch: #F3EEE3;
  --wordmark-filter: none;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14110D;
    --surface: #1B1712;
    --surface-soft: #231E17;
    --surface-sunk: #2B241B;
    --ink: #F4EEE4;
    --body: #DCD3C5;
    --muted: #B0A595;
    --faint: #8C8273;
    --line: #2F2820;
    --line-strong: #43392D;
    --amber: #B87A35;
    --amber-soft: #2E2416;
    --amber-ink: #E2B271;
    --on-ink: #14110D;
    --danger: #F2958C;
    --danger-soft: #3A1E1A;
    --success: #7FC7A2;
    --success-soft: #17291F;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-2: 0 18px 48px rgba(0, 0, 0, .45);
    --wordmark-filter: invert(1);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #14110D; --surface: #1B1712; --surface-soft: #231E17; --surface-sunk: #2B241B;
  --ink: #F4EEE4; --body: #DCD3C5; --muted: #B0A595; --faint: #8C8273;
  --line: #2F2820; --line-strong: #43392D;
  --amber: #B87A35; --amber-soft: #2E2416; --amber-ink: #E2B271; --on-ink: #14110D;
  --danger: #F2958C; --danger-soft: #3A1E1A; --success: #7FC7A2; --success-soft: #17291F;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 18px 48px rgba(0, 0, 0, .45);
  --wordmark-filter: invert(1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -.025em; line-height: 1.12; font-weight: 700; }
p { margin: 0; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
@media (max-width: 560px) { .wrap { padding: 0 16px; } }
.eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-ink); }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }

/* ── brand ──────────────────────────────────────────────────────────────────────────────────────── */
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand .mark { width: 34px; height: 34px; border-radius: 10px; background: var(--mark-bg); display: grid; place-items: center; box-shadow: var(--shadow-1); flex: none; }
.brand .mark svg { width: 20px; height: 20px; }
.brand .word { height: 15px; width: auto; filter: var(--wordmark-filter); }

/* ── buttons ────────────────────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: 650 15px/1 var(--sans); letter-spacing: -.01em; cursor: pointer; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--r-pill); padding: 13px 22px; min-height: 46px;
  transition: transform .06s ease, background .15s, border-color .15s, box-shadow .15s, opacity .15s;
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn-ink { background: var(--ink); color: var(--on-ink); box-shadow: var(--shadow-1); }
.btn-ink:hover { box-shadow: var(--shadow-2); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface-soft); }
.btn-quiet { background: transparent; color: var(--muted); padding: 10px 14px; min-height: 40px; }
.btn-quiet:hover { color: var(--ink); background: var(--surface-soft); }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--line-strong); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-sm { padding: 9px 15px; min-height: 38px; font-size: 14px; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ── nav ────────────────────────────────────────────────────────────────────────────────────────── */
header.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; gap: 18px; height: 66px; }
.nav-links { display: flex; gap: 2px; margin-left: 12px; }
.nav-links a { padding: 8px 13px; border-radius: var(--r-pill); color: var(--muted); font-weight: 600; font-size: 14px; text-decoration: none; transition: .15s; }
.nav-links a:hover { color: var(--ink); background: var(--surface-soft); }
.nav .spacer { flex: 1; }
.nav .btn { padding: 9px 16px; min-height: 40px; font-size: 14px; }
@media (max-width: 820px) { .nav-links { display: none; } }

/* ── cards ──────────────────────────────────────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 700; background: var(--surface-sunk); color: var(--body); }
.pill.plus { background: var(--ink); color: var(--on-ink); }
.pill.ok { background: var(--success-soft); color: var(--success); }
.pill.warn { background: var(--amber-soft); color: var(--amber-ink); }
.pill.bad { background: var(--danger-soft); color: var(--danger); }

/* ── footer ─────────────────────────────────────────────────────────────────────────────────────── */
footer.site { border-top: 1px solid var(--line); padding: 34px 0 44px; margin-top: 40px; }
.foot-in { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.foot-in .spacer { flex: 1; }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-links a { color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; }
.foot-links a:hover { color: var(--ink); }
.foot-copy { color: var(--faint); font-size: 13px; margin-top: 14px; }