/* ============================================================
   LIGHT THEME
   Dark (black and white) lives in styles.css. html[data-theme="light"]
   swaps the tokens to the warm palette: cream and light tan grounds,
   near-black ink, burnt orange accent, dark header and footer.
   Same layout, same motion.
   ============================================================ */

:root[data-theme="light"] {
  --black: #fff4d8;   /* "odd" sections: warm cream */
  --gray: #fffaeb;    /* "even" sections: light tan */
  --ink: #1e1d1a;     /* text and lines. 15.4:1 on cream */
  --mute: #5c5b57;    /* secondary text. 6.2:1 on cream, 6.6:1 on light tan */
  --soft: #cfc8b6;    /* quiet lines. Never text */
  --accent: #a8410c;  /* burnt orange. 5.6:1 on cream, 5.9:1 on light tan */
  --accent-text: #a8410c;
  --btn-bg: #a8410c;
  --btn-fg: #fff4d8;
  --btn-hover-fg: #a8410c;
  --sbg: var(--black);
  --sfill: #f5e6bf;
  color-scheme: light;
}

[data-theme="light"] .theme-black { --sbg: var(--black); --sfill: #f5e6bf; }
[data-theme="light"] .theme-gray  { --sbg: var(--gray);  --sfill: #f8ecca; }

[data-theme="light"] body { background: var(--black); }
[data-theme="light"] :focus-visible { outline-color: var(--accent); }

/* header and footer: the dark band, cream text */
[data-theme="light"] .site-header,
[data-theme="light"] .site-footer { background: var(--ink); color: var(--black); }
[data-theme="light"] .site-header :focus-visible,
[data-theme="light"] .site-footer :focus-visible { outline-color: var(--black); }
[data-theme="light"] .menu-btn,
[data-theme="light"] .theme-btn { border-color: var(--black); color: var(--black); }
@media (hover: hover) {
  [data-theme="light"] .theme-btn:hover { background: var(--black); color: var(--ink); }
}
[data-theme="light"] .site-nav a:not(.btn) { border-top-color: rgb(255 244 216 / 0.18); }
[data-theme="light"] .site-nav .btn:hover { color: var(--black); border-color: var(--black); }
[data-theme="light"] .site-footer .small { color: #c9c2b0; } /* 9.6:1 on ink */

[data-theme="light"] .cmp th + th { border-left-color: rgb(255 244 216 / 0.25); }

/* cream pop-up, dark text */
[data-theme="light"] .dialog { --dbg: var(--black); --dfg: var(--ink); }
[data-theme="light"] .form .opt { color: var(--mute); }
[data-theme="light"] .dialog::backdrop { background: rgb(30 29 26 / 0.6); }

/* logo: cream version on the dark header */
[data-theme="light"] .logo-dark { display: none; }
[data-theme="light"] .logo-light { display: block; }