/* =========================================================
   ChrysoKit, Dark Theme
   Warm dark palette. Terracotta and sage accents preserved.
   All component styles remain identical, only variables
   are overridden.
   ========================================================= */

html[data-theme="dark"] {
  /* Accents shifted slightly lighter for contrast on dark bg */
  --primary: #E0B88A;
  --primary-dark: #D4A373;
  --primary-darker: #F0CFA3;

  --secondary-bg: #2B2520;
  --page-bg: #1A1714;
  --text: #F2EAD8;
  --text-muted: #B5AC9A;
  --text-subtle: #7E7668;

  --success: #A8B288;
  --success-dark: #B9C49A;
  --success-darker: #CCD5AE;

  --border: #35302A;
  --border-warm: #3A342D;
  --white: #24201C;

  --danger: #D98E75;
  --warning: #E8B36A;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 4px 10px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.55), 0 6px 12px rgba(0, 0, 0, 0.4);
  --shadow-focus: 0 0 0 3px rgba(224, 184, 138, 0.35);
}

html[data-theme="dark"] body {
  background-image:
    radial-gradient(1200px 600px at 90% -10%, rgba(212, 163, 115, 0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(168, 178, 136, 0.08), transparent 60%);
}

html[data-theme="dark"] .site-header {
  background-color: rgba(26, 23, 20, 0.82);
}

html[data-theme="dark"] .logo-mark {
  color: var(--page-bg);
}

html[data-theme="dark"] .btn-primary {
  color: #1A1714;
}
html[data-theme="dark"] .btn-primary:hover {
  color: #1A1714;
}

html[data-theme="dark"] .hero .eyebrow {
  background: rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .hero h1 em {
  background: linear-gradient(180deg, transparent 62%, rgba(224, 184, 138, 0.32) 62%);
}

html[data-theme="dark"] ::selection {
  background: var(--primary);
  color: var(--page-bg);
}

html[data-theme="dark"] .tool-card::before {
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(224, 184, 138, 0.14), transparent 50%);
}

html[data-theme="dark"] .toast {
  background: var(--secondary-bg);
  color: var(--text);
  border: 1px solid var(--border-warm);
}

html[data-theme="dark"] #qrcode img,
html[data-theme="dark"] #qrcode canvas {
  background: #FFFFFF; /* QR codes must stay on white for scanability */
}

html[data-theme="dark"] .bmi-marker {
  box-shadow: 0 0 0 3px var(--page-bg);
}

html[data-theme="dark"] .bmi-bar {
  background: linear-gradient(to right,
    #E0A458 0%, #E0A458 18.5%,
    #A8B288 18.5%, #A8B288 50%,
    #D4A373 50%, #D4A373 75%,
    #C97B63 75%, #C97B63 100%);
}