/* The Daily With — public-page palettes.

   One block per theme key. The creator's choice is stamped on <html> as
   data-theme, on their public page and on their dashboard alike. This file
   is loaded by both, so the phone preview in the editor and the page a
   visitor sees can never drift apart.

   The dashboard has its own tokens (--bg, --surface …) in app.css; these
   are deliberately prefixed --pub-* so the two sets never collide.

   --pub-shade is an RGB triplet, used with alpha for the gradient over the
   hero photo. On dark themes it equals the page background, so the photo
   fades into the page. On light themes it is a dark overlay, so white text
   stays readable and the hero reads as a rounded photo card instead. */

:root,
:root[data-theme="dark"] {
  --pub-scheme: dark;
  --pub-bg: #0e0b12;
  --pub-surface: #171219;
  --pub-surface-2: #1f1823;
  --pub-line: #2b2331;
  --pub-text: #f6f1f7;
  --pub-muted: #b4a8bd;
  --pub-accent: #e8588f;
  --pub-accent-deep: #c43b78;
  --pub-on-accent: #ffffff;
  --pub-shade: 14 11 18;
}

:root[data-theme="light"],
:root[data-theme="system"] {
  --pub-scheme: light;
  --pub-bg: #f7f4f8;
  --pub-surface: #ffffff;
  --pub-surface-2: #efe9f1;
  --pub-line: #e6dfe9;
  --pub-text: #1c1722;
  --pub-muted: #6b6276;
  --pub-accent: #c7406f;
  --pub-accent-deep: #9f2d55;
  --pub-on-accent: #ffffff;
  --pub-shade: 28 20 34;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --pub-scheme: dark;
    --pub-bg: #0e0b12;
    --pub-surface: #171219;
    --pub-surface-2: #1f1823;
    --pub-line: #2b2331;
    --pub-text: #f6f1f7;
    --pub-muted: #b4a8bd;
    --pub-accent: #e8588f;
    --pub-accent-deep: #c43b78;
    --pub-on-accent: #ffffff;
    --pub-shade: 14 11 18;
  }
}

:root[data-theme="rose"] {
  --pub-scheme: light;
  --pub-bg: #fdf4f6;
  --pub-surface: #ffffff;
  --pub-surface-2: #f8e6ec;
  --pub-line: #f0dbe2;
  --pub-text: #2a1a20;
  --pub-muted: #7a636c;
  --pub-accent: #d4246b;
  --pub-accent-deep: #9e1a4f;
  --pub-on-accent: #ffffff;
  --pub-shade: 44 22 32;
}

:root[data-theme="sage"] {
  --pub-scheme: light;
  --pub-bg: #f3f6f2;
  --pub-surface: #ffffff;
  --pub-surface-2: #e9eee6;
  --pub-line: #dfe6da;
  --pub-text: #1b211a;
  --pub-muted: #5f6b5c;
  --pub-accent: #3f7652;
  --pub-accent-deep: #2b5339;
  --pub-on-accent: #ffffff;
  --pub-shade: 22 30 24;
}

:root[data-theme="midnight"] {
  --pub-scheme: dark;
  --pub-bg: #0b1020;
  --pub-surface: #121a30;
  --pub-surface-2: #18213b;
  --pub-line: #25304e;
  --pub-text: #e9eefb;
  --pub-muted: #94a3c4;
  --pub-accent: #6aa6ff;
  --pub-accent-deep: #3d7de0;
  --pub-on-accent: #06101f;
  --pub-shade: 11 16 32;
}

:root[data-theme="noir"] {
  --pub-scheme: dark;
  --pub-bg: #000000;
  --pub-surface: #0d0d0d;
  --pub-surface-2: #171717;
  --pub-line: #2e2e2e;
  --pub-text: #ffffff;
  --pub-muted: #bdbdbd;
  --pub-accent: #ffd166;
  --pub-accent-deep: #e0a830;
  --pub-on-accent: #000000;
  --pub-shade: 0 0 0;
}