:root {
  /* palette */
  --carbon: #0B0B0C; --coal: #141416; --graphite: #2A2A2E; --slate: #3A3A40;
  --steel: #55555C; --ash: #6B6B72; --fog: #8E8E95; --mist: #B4B4B9;
  --stone: #D4D4D6; --linen: #E8E8E4; --chalk: #F2F2EF; --paper: #FAFAF8;
  --volt: #C8F542; --volt-bright: #D9FF5C; --volt-ink: #56720A; --volt-tint: #EEF9C9;
  --signal: #FF5A36; --signal-ink: #B5320F;
  --font-display: 'Archivo', system-ui, sans-serif; --font-body: 'Manrope', system-ui, sans-serif;

  /* semantic, dark theme (default) */
  --bg: var(--carbon); --bg-raised: var(--coal);
  --divider: var(--graphite);            /* decorative only */
  --border-control: var(--ash);          /* inputs, checkboxes, clickable cards: 3.7:1 on Carbon */
  --text: var(--chalk); --text-secondary: var(--mist); --text-muted: var(--fog);
  --btn-bg: var(--volt); --btn-text: var(--carbon); --btn-bg-hover: var(--volt-bright);
  --btn-2-text: var(--chalk); --btn-2-border: var(--ash);
  --link: var(--volt); --link-hover: var(--volt-bright);
  --eyebrow: var(--volt);
  --focus: var(--volt);
  --error: var(--signal);
}
.theme-light {
  --bg: var(--chalk); --bg-raised: var(--paper);
  --divider: var(--stone);
  --border-control: var(--ash);          /* 4.7:1 on Chalk */
  --text: var(--carbon); --text-secondary: var(--steel); --text-muted: var(--ash);
  --btn-bg: var(--carbon); --btn-text: var(--chalk); --btn-bg-hover: var(--slate);
  --btn-2-text: var(--carbon); --btn-2-border: var(--ash);
  --link: var(--volt-ink); --link-hover: var(--volt-ink);
  --eyebrow: var(--volt-ink);
  --focus: var(--volt-ink);
  --error: var(--signal-ink);
}
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.btn { display:inline-block; padding:14px 22px; background:var(--btn-bg); color:var(--btn-text); font:700 13px/1 var(--font-body); letter-spacing:0.1em; text-transform:uppercase; text-decoration:none; border:0; }
.btn:hover { background:var(--btn-bg-hover); }
.btn-2 { display:inline-block; padding:13px 21px; background:transparent; color:var(--btn-2-text); border:1px solid var(--btn-2-border); font:700 13px/1 var(--font-body); letter-spacing:0.1em; text-transform:uppercase; text-decoration:none; }
a { color: var(--link); } a:hover { color: var(--link-hover); }
.input { background:var(--bg-raised); color:var(--text); border:1px solid var(--border-control); padding:12px 14px; font:500 15px/1.4 var(--font-body); }
.input::placeholder { color: var(--text-muted); }
.input[aria-invalid="true"] { border-color: var(--error); }
hr, .divider { border:0; border-top:1px solid var(--divider); }

.logo { display:inline-flex; align-items:baseline; text-decoration:none; color:var(--text); font-family:var(--font-display); font-weight:700; font-stretch:125%; font-variation-settings:'wdth' 125; letter-spacing:0.12em; line-height:1; white-space:nowrap; }
.logo-x { display:block; flex:none; height:0.687em; width:0.78em; margin-left:0.032em; }