/* theme — color-scheme plumbing, dark-mode image softening, the Inter faces and the design tokens */

/* the scheme follows the OS; data-theme (theme.js) overrides it and flips every light-dark() */
:root {
  color-scheme: light dark;
  background-color: var(--bg-primary);
  color: var(--text-tertiary);
  /* Admin font choices arrive as --gh-font-*; Inter is the fallback */
  font-family: var(--gh-font-body, Inter, system-ui, sans-serif);
  font-size: 1rem;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--gh-font-heading, inherit);
}
:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}

/* images soften slightly in dark; --img-filter-dark stays overridable */
:root {
  --img-filter-dark: brightness(0.82) saturate(0.92);
}
img {
  filter: var(--img-filter, none);
}
:root[data-theme="dark"] {
  --img-filter: var(--img-filter-dark);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --img-filter: var(--img-filter-dark);
  }
}

/* --font-mono is the one home of the mono stack; the @font-face lives in editor-theme.css */
:root {
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
pre,
code {
  font-family: var(--font-mono);
}

/* Inter roman */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/Inter-VariableFont_opsz,wght.woff2?v=20260827") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Inter italic */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/Inter-Italic-VariableFont_opsz,wght.woff2?v=20260827") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}


:root {
  /* the accent: Admin's accent color via ghost_head, fallback for contexts without it */
  --accent: var(--ghost-accent-color, #7F56D9);
  /* the accent as text: derived, so editor-theme skins inherit it */
  --accent-text: light-dark(
    color-mix(in oklch, var(--accent) 92%, black),
    color-mix(in oklch, var(--accent) 70%, white)
  );
  /* legacy alias: every brand-tinted hover/focus/current reads it */
  --text-brand-secondary: var(--accent-text);
  --text-primary: light-dark(#181D27, #F7F7F7);
  --text-secondary: light-dark(#414651, #CECFD2);
  --text-tertiary: light-dark(#535862, #94979C);
  --text-white: light-dark(#fff, #fff);
  --fg-quaternary: light-dark(#91949B, #61656C); /* 3:1, calibrated for icon-only controls */
  --bg-primary: light-dark(#FFFFFF, #0C0E12);
  /* footer band ground: a 5% ink mix over the page bg */
  --bg-secondary: color-mix(in srgb, var(--text-secondary) 5%, var(--bg-primary));
  /* surfaces */
  --border-primary: light-dark(#D5D7DA, #373A41);
  --border-secondary: light-dark(#E9EAEB, #22262F);
  --shadow-rgb: 10 13 18;
  /* the 700s anchor every tint; brand and gray-blue keep 200/50 pairs for editor-content's cards */
  --utility-brand-700: light-dark(#6941C6, #D6BBFB);
  --utility-brand-200: light-dark(#E9D7FE, #53389E);
  --utility-brand-50: light-dark(#F9F5FF, #2C1C5F);
  --utility-indigo-700: light-dark(#3538CD, #A4BCFD);
  --utility-blue-light-700: light-dark(#026AA2, #7CD4FD);
  --utility-gray-blue-700: light-dark(#363F72, #B3B8DB);
  --utility-gray-blue-200: light-dark(#D5D9EB, #293056);
  --utility-gray-blue-50: light-dark(#F8F9FC, #0D0F1C);
  --utility-purple-700: light-dark(#5925DC, #BDB4FE);
  --utility-pink-700: light-dark(#C11574, #FAA7E0);
  --utility-orange-700: light-dark(#B93815, #F7B27A);
  --utility-green-700: light-dark(#067647, #75E0A7);
  --utility-yellow-700: light-dark(#A15C07, #FAC515);
  --utility-red-700: light-dark(#B42318, #F97066);

}