/* Seedance typography and color tokens. */
@font-face {
  font-family: "Nunito Variable";
  src: url("./fonts/nunito-latin-wght-normal-v3.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
}

@font-face {
  font-family: "Nunito Variable";
  src: url("./fonts/nunito-latin-wght-italic-v3.woff2") format("woff2-variations");
  font-style: italic;
  font-weight: 200 1000;
  font-display: swap;
}

@font-face {
  font-family: "Resource Han Rounded CN";
  src: url("./fonts/resource-han-rounded-cn-cymruera-v1.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --seedance-orange: #f84331;
  --seedance-orange-deep: #d71712;
  --seedance-orange-action: #c21a13;
  --seedance-orange-action-hover: #b00000;
  --seedance-purple: #926dff;
  --seedance-purple-deep: #7746e0;
  --seedance-yellow: #f7ca00;
  --seedance-green: #00a94d;
  --seedance-cream: #faf4ea;
  --seedance-cream-deep: #f4ead9;
  --seedance-card: #ffffff;
  --seedance-ink: #09101a;
  --seedance-muted: #62666d;
  --seedance-line: #e0dad1;
  --seedance-accent-soft: #fde8e3;
  --seedance-purple-soft: #eee9ff;
  --seedance-danger-soft: #fff0ed;
  --seedance-shadow: 0 6px 28px rgba(9, 16, 26, 0.07), 0 18px 55px rgba(53, 38, 23, 0.08);

  --font-body: "Nunito Variable", "Resource Han Rounded CN", "PingFang SC", ui-rounded, system-ui, sans-serif;
  --font-heading: var(--font-body);
  --font-mono: var(--font-body);
  --color-bg: var(--seedance-cream);
  --color-text: var(--seedance-ink);
  --color-text-secondary: var(--seedance-muted);
  --color-link: var(--seedance-orange-action);
  --color-accent: var(--seedance-orange-action);
  --color-border: var(--seedance-line);
  --color-code-bg: var(--seedance-cream-deep);
  --color-highlight-bg: var(--seedance-yellow);
  --color-highlight-text: var(--seedance-ink);
  --color-blockquote-border: var(--seedance-orange-action);
  --color-blockquote-bg: transparent;

  /* Frozen-page aliases. */
  --bg-color: var(--seedance-cream);
  --glass-bg: rgba(250, 244, 234, 0.88);
  --primary-color: var(--seedance-orange-action);
  --comments-page-bg: var(--seedance-cream);
}

html[data-theme="dark"] {
  --seedance-cream: #000000;
  --seedance-cream-deep: #0b1220;
  --seedance-card: #101927;
  --seedance-ink: #f7f8fb;
  --seedance-muted: #adb6c4;
  --seedance-line: #293447;
  --seedance-accent-soft: #351a1c;
  --seedance-purple-soft: #251e43;
  --seedance-danger-soft: #351a1c;
  --seedance-shadow: 0 8px 30px rgba(0, 0, 0, 0.28), 0 24px 70px rgba(0, 0, 0, 0.32);

  --color-link: #ff7468;
  --color-accent: #ff7468;
  --color-blockquote-border: #ff7468;
  --glass-bg: rgba(16, 25, 39, 0.88);
  --primary-color: #ff7468;
  --comments-page-bg: #000000;
  color-scheme: dark;
}

html[data-theme="light"] { color-scheme: light; }

html,
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-variation-settings: "ROND" 100;
}

button,
input,
textarea,
select,
option {
  font-family: var(--font-body);
  font-variation-settings: "ROND" 100;
}

code,
kbd,
samp,
pre,
#timer,
.header-clock,
.record-date,
.back-date,
.post-meta-text,
.item-time,
.block-duration,
.axis-time-label {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

::selection {
  background: var(--seedance-yellow);
  color: #09101a;
}

:focus-visible {
  outline: 3px solid var(--seedance-purple);
  outline-offset: 3px;
}