/*
 * Design tokens. The ONLY CSS shared by the site and the forum.
 * All colors in components must come from these variables (no fixed colors), so that
 * light and dark mode work everywhere.
 *
 * Theme selection:
 *   no data-theme      -> follow the system (prefers-color-scheme)
 *   data-theme="dark"  -> dark, data-theme="light" -> light
 */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-var.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

@layer tokens {

:root {
  --yac-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --yac-font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  --yac-yellow-1: #f7d540;
  --yac-yellow-2: #f5a705;
  --yac-radius-s: 10px;
  --yac-radius-m: 16px;
  --yac-radius-l: 24px;
  --yac-gutter: clamp(16px, 4vw, 40px);
  --yac-max: 1140px;
  --yac-max-text: 720px;

  /* light (default) */
  --yac-bg: #ffffff;
  --yac-surface: #f6f7f9;
  --yac-surface-2: #eceef2;
  --yac-line: #e3e5ea;
  --yac-text: #111318;
  --yac-text-rgb: 17, 19, 24;
  --yac-muted: #5d6270;
  --yac-accent: #f5b00c;
  --yac-accent-ink: #1b1400;
  --yac-link: #9a6100;
  --yac-link-rgb: 154, 97, 0;
  --yac-link-hover: #7a4c00;
  --yac-heart: #d9434b; /* thank-you hearts: a warm coral red, not plain red */
  --yac-shadow: 0 1px 2px rgb(16 24 40 / .06), 0 12px 32px rgb(16 24 40 / .08);
  --yac-shadow-lg: 0 40px 100px rgb(16 24 40 / .18);
  --yac-glow: rgb(245 167 5 / .28);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --yac-bg: #0e1014; --yac-surface: #161920; --yac-surface-2: #1e222b; --yac-line: #262b35;
    --yac-text: #eef0f4; --yac-text-rgb: 238, 240, 244; --yac-muted: #9aa1b0;
    --yac-accent: #f7c531; --yac-link: #f7c531; --yac-link-rgb: 247, 197, 49; --yac-link-hover: #ffd966; --yac-heart: #ec6469;
    --yac-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 12px 32px rgb(0 0 0 / .35);
    --yac-shadow-lg: 0 40px 100px rgb(0 0 0 / .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --yac-bg: #0e1014; --yac-surface: #161920; --yac-surface-2: #1e222b; --yac-line: #262b35;
  --yac-text: #eef0f4; --yac-text-rgb: 238, 240, 244; --yac-muted: #9aa1b0;
  --yac-accent: #f7c531; --yac-link: #f7c531; --yac-link-rgb: 247, 197, 49; --yac-link-hover: #ffd966; --yac-heart: #ec6469;
  --yac-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 12px 32px rgb(0 0 0 / .35);
  --yac-shadow-lg: 0 40px 100px rgb(0 0 0 / .6);
  color-scheme: dark;
}

/*
 * Bootstrap mapping. Bootstrap sets its variables on :root and [data-bs-theme]; this layer is
 * above the vendor layer, so these values win for both themes.
 */
:root, [data-bs-theme] {
  --bs-body-font-family: var(--yac-font);
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.65;
  --bs-body-bg: var(--yac-bg);
  --bs-body-color: var(--yac-text);
  --bs-body-color-rgb: var(--yac-text-rgb);
  --bs-emphasis-color: var(--yac-text);
  --bs-heading-color: var(--yac-text);
  --bs-secondary-color: var(--yac-muted);
  --bs-secondary-bg: var(--yac-surface);
  --bs-tertiary-color: var(--yac-muted);
  --bs-tertiary-bg: var(--yac-surface-2);
  --bs-border-color: var(--yac-line);
  --bs-border-color-translucent: var(--yac-line);
  --bs-link-color: var(--yac-link);
  --bs-link-color-rgb: var(--yac-link-rgb);
  --bs-link-hover-color: var(--yac-link-hover);
  --bs-link-decoration: none;
  --bs-border-radius: var(--yac-radius-s);
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: var(--yac-radius-m);
  --bs-border-radius-xl: var(--yac-radius-l);
  --bs-focus-ring-color: color-mix(in srgb, var(--yac-accent) 45%, transparent);
  --bs-code-color: var(--yac-link);
  --bs-font-monospace: var(--yac-font-mono);
}

} /* @layer tokens */