/* Framework-agnostic theme tokens. Four palettes, two font pairs (spec §4 Settings). */

/*
 * Round 11: the host app speaks the brand's red-gold voice in the launch faces, self-hosted (OFL,
 * companies/zulemi/fonts/licenses). /fonts/ is served on every host (owner/routing.mjs) and copied to
 * dist/fonts by build.mjs. Same subsets and ranges as the guest theme sheet; CJK and Thai use the system.
 */
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/eb-garamond-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0100-017F; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/eb-garamond-vietnamese.woff2") format("woff2"); unicode-range: U+0100-017F, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EFF, U+0300-0323, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/be-vietnam-pro-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0100-017F; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/be-vietnam-pro-vietnamese.woff2") format("woff2"); unicode-range: U+0100-017F, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EFF, U+0300-0323, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/be-vietnam-pro-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0100-017F; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/be-vietnam-pro-700-vietnamese.woff2") format("woff2"); unicode-range: U+0100-017F, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EFF, U+0300-0323, U+20AB; }

:root {
  --zl-font-display: "EB Garamond", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", "Songti SC", "Noto Serif CJK SC", "Nanum Myeongjo", Georgia, serif;
  --zl-font-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans", "Noto Sans CJK JP", "Apple SD Gothic Neo", Thonburi, "Noto Sans Thai", sans-serif;
  --zl-font-pair: serif-sans;
}

[data-font-pair="sans-sans"] {
  --zl-font-display: "Be Vietnam Pro", system-ui, sans-serif;
  --zl-font-body: "Be Vietnam Pro", system-ui, sans-serif;
  --zl-font-pair: sans-sans;
}

/* Brand default: the red-gold launch template's paper, ink, lacquer red and gold. */
[data-palette="red-gold"],
:root {
  --zl-bg: #f8f3ea;
  --zl-fg: #2a1810;
  --zl-accent: #9b1b2e;
  --zl-muted: #5c4033;
  --zl-surface: #fffdf8;
  --zl-surface-alt: #f4ebdb;
  --zl-border: #e8dcc4;
  --zl-border-strong: #8f7a5e;
  --zl-accent-hover: #7d1424;
  --zl-gold: #8a6c2e;
  --zl-gold-soft: #c9a24a;
  --zl-success: #1f6b3a;
  --zl-success-bg: #eef6f0;
  --zl-danger: #a1262f;
  --zl-danger-bg: #fbeff0;
  --zl-radius: 6px;
  --zl-shadow: 0 1px 2px rgba(42, 24, 16, 0.04), 0 12px 32px -20px rgba(42, 24, 16, 0.22);
}

[data-palette="plum"] {
  --zl-bg: #faf6f4;
  --zl-fg: #1a1216;
  --zl-accent: #6b2d5b;
  --zl-muted: #5c4a54;
  --zl-surface: #ffffff;
  --zl-surface-alt: #f3ebe8;
  --zl-border: #e6dad6;
  --zl-border-strong: #8a7480;
  --zl-accent-hover: #56234a;
  --zl-gold: #6b2d5b;
  --zl-gold-soft: #b58aa8;
  --zl-success: #1f6b3a;
  --zl-success-bg: #eef6f0;
  --zl-danger: #a1262f;
  --zl-danger-bg: #fbeff0;
  --zl-radius: 10px;
}

[data-palette="ink"] {
  --zl-bg: #f4f6f8;
  --zl-fg: #121417;
  --zl-accent: #1f4e79;
  --zl-muted: #3d4a57;
  --zl-surface-alt: #e8edf2;
  --zl-border: #d8dee5;
  --zl-border-strong: #7d8794;
  --zl-accent-hover: #173b5c;
}

[data-palette="garden"] {
  --zl-bg: #f4f7f1;
  --zl-fg: #142016;
  --zl-accent: #215c32;
  --zl-muted: #3d5342;
  --zl-surface-alt: #e7efe3;
  --zl-border: #d3ddcf;
  --zl-border-strong: #71806f;
  --zl-accent-hover: #184626;
}

body {
  background: var(--zl-bg);
  color: var(--zl-fg);
  font-family: var(--zl-font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--zl-font-display);
  font-weight: 500;
  color: var(--zl-fg);
}