:root{
  /* Base palette */
  --near-black:#0A0A0A;
  --black:#111111;
  --black-raised:#181818;
  --black-card:#1C1C1C;
  --black-border:#2A2A2A;
  --white:#FFFFFF;
  --off-white:#F7F7F5;
  --gray-100:#EFEFED;
  --gray-300:#E5E5E5;
  --gray-500:#9A9A9A;
  --gray-600:#6B6B6B;
  --gray-800:#3D3D3D;

  --yellow:#FFD800;
  --yellow-hover:#F0CB00;
  --yellow-press:#D9B700;
  --yellow-tint:#FFF6C2;

  /* Semantic — light theme (default) */
  --surface-page:var(--off-white);
  --surface-raised:var(--white);
  --surface-card:var(--white);
  --surface-sunken:var(--gray-100);
  --surface-inverse:var(--near-black);
  --surface-accent:var(--yellow);
  --surface-accent-tint:var(--yellow-tint);

  --text-primary:var(--near-black);
  --text-secondary:var(--gray-800);
  --text-muted:var(--gray-600);
  --text-inverse:var(--white);
  --text-on-accent:var(--near-black);
  --text-link:var(--near-black);
  --text-link-hover:var(--gray-600);

  --border-subtle:var(--gray-300);
  --border-strong:var(--near-black);
  --border-accent:var(--yellow);
  --border-field:#D6D6D2;

  --focus-ring:var(--near-black);
  --focus-ring-accent:var(--yellow);

  /* Semantic feedback */
  --success:#0F7A45;
  --success-surface:#E7F4EC;
  --warning:#B06A00;
  --warning-surface:#FDF3E2;
  --danger:#C42B1C;
  --danger-surface:#FBEAE8;
  --emergency:#E02718;
}

[data-theme="dark"]{
  --surface-page:var(--near-black);
  --surface-raised:var(--black);
  --surface-card:var(--black-card);
  --surface-sunken:#080808;
  --surface-inverse:var(--off-white);
  --surface-accent:var(--yellow);
  --surface-accent-tint:#2A2400;

  --text-primary:var(--white);
  --text-secondary:#D4D4D0;
  --text-muted:var(--gray-500);
  --text-inverse:var(--near-black);
  --text-on-accent:var(--near-black);
  --text-link:var(--white);
  --text-link-hover:var(--yellow);

  --border-subtle:var(--black-border);
  --border-strong:#3A3A3A;
  --border-field:#333333;

  --focus-ring:var(--yellow);

  --success-surface:#0E2419;
  --warning-surface:#2A1E06;
  --danger-surface:#2B120F;
}