/*
 * Keryg Color System V2
 *
 * One semantic color contract for the public site. Components should consume
 * the --color-* roles below; the legacy aliases are compatibility bindings
 * for older CSS while those selectors are migrated incrementally.
 */

:root {
  color-scheme: light;

  /* Light foundation: preserve the approved warm parchment and Keryg green. */
  --color-page: #F1EEE6;
  --color-surface: #E9E5DA;
  --color-surface-raised: #F7F4ED;
  --color-surface-subtle: #DED9CC;
  --color-surface-muted: var(--color-surface-subtle);
  --color-surface-inverse: #102517;

  --color-text-primary: #1A2C20;
  --color-text: var(--color-text-primary);
  --color-text-heading: #102517;
  --color-text-secondary: #365A45;
  --color-text-muted: #5D7F6A;
  --color-text-inverse: #FFFFFF;

  --color-border: rgba(16, 37, 23, 0.14);
  --color-border-subtle: rgba(16, 37, 23, 0.08);
  --color-border-strong: rgba(16, 37, 23, 0.24);

  --color-brand: #2F6B45;
  --color-brand-hover: #245537;
  --color-brand-active: #1D452D;
  --color-brand-foreground: #FFFFFF;
  --color-brand-soft: color-mix(in srgb, var(--color-brand) 12%, transparent);

  --color-secondary: #6F6254;
  --color-accent: #8A5A13;
  --color-accent-editorial: var(--color-accent);
  --color-link: #2F6B45;
  --color-link-hover: #245537;
  --color-link-visited: #365A45;
  --color-focus: #2B6CB0;
  --color-nav-surface: color-mix(in srgb, var(--color-surface) 94%, transparent);

  --color-success: #286B44;
  --color-success-foreground: #286B44;
  --color-success-background: color-mix(in srgb, var(--color-success-foreground) 10%, var(--color-page));
  --color-success-border: color-mix(in srgb, var(--color-success-foreground) 42%, var(--color-page));
  --color-warning: #8A5A00;
  --color-warning-foreground: #8A5A00;
  --color-warning-background: color-mix(in srgb, var(--color-warning-foreground) 10%, var(--color-page));
  --color-warning-border: color-mix(in srgb, var(--color-warning-foreground) 42%, var(--color-page));
  --color-error: #A93636;
  --color-error-foreground: #A93636;
  --color-error-background: color-mix(in srgb, var(--color-error-foreground) 10%, var(--color-page));
  --color-error-border: color-mix(in srgb, var(--color-error-foreground) 42%, var(--color-page));
  --color-info: #356F8A;
  --color-info-foreground: #326A82; /* derived only for small text; base remains #356F8A */
  --color-info-background: color-mix(in srgb, var(--color-info-foreground) 10%, var(--color-page));
  --color-info-border: color-mix(in srgb, var(--color-info-foreground) 42%, var(--color-page));

  /* Shared Interlinear semantic alias retained by the current reader UI. */
  --color-interlinear-muted: var(--color-text-muted);

  --color-disabled-text: #8B8A84;
  --color-disabled-surface: #DDD9CF;
  --color-disabled-border: #C8C3B8;
  --color-selected: var(--color-brand);
  --color-selected-background: color-mix(in srgb, var(--color-brand) 14%, var(--color-surface));
  --color-overlay: rgba(16, 37, 23, 0.30);
  --color-shadow: rgba(16, 37, 23, 0.12);
  --color-danger: var(--color-error-foreground);
  --color-dialog-surface: var(--color-surface-raised);
  --color-dialog-backdrop: var(--color-overlay);
  --color-dialog-action-surface: var(--color-surface-raised);

  /* Existing aliases now resolve from semantic roles. */
  --navy: var(--color-text-heading);
  --navy-2: var(--color-success-foreground);
  --navy-3: var(--color-brand);
  --navy-4: var(--color-text-muted);
  --sand: var(--color-secondary);
  --sand-2: var(--color-secondary);
  --sienna: var(--color-brand);
  --sienna-lt: var(--color-brand-hover);
  --sienna-wash: var(--color-surface-subtle);
  --gold: var(--color-accent);
  --cream: var(--color-page);
  --cream-2: var(--color-surface);
  --cream-3: var(--color-surface-subtle);
  --rule: var(--color-border);
  --rule-strong: var(--color-border-strong);
  --ink: var(--color-text-primary);
  --ink-2: var(--color-text-secondary);
  --ink-3: var(--color-text-secondary);
  --ink-4: var(--color-text-muted);
  --parchment: var(--color-page);
  --parchment-2: var(--color-surface);
  --parchment-3: var(--color-surface-subtle);
  --olive: var(--color-brand);
  --olive-light: var(--color-brand-hover);
  --brand: var(--color-brand);
  --accent: var(--color-accent);
  --paper: var(--color-surface-raised);
}

html[data-theme="dark"],
html[data-theme-preview="dark"] {
  color-scheme: dark;

  /* Dark foundation: the approved restrained green-charcoal Study language. */
  --color-page: #171A17;
  --color-surface: #20241F;
  --color-surface-raised: #292E28;
  --color-surface-subtle: #30372F;
  --color-surface-muted: var(--color-surface-subtle);
  --color-surface-inverse: #0E120F;

  --color-text-primary: #E9E8DE;
  --color-text: var(--color-text-primary);
  --color-text-heading: #F6F5EC;
  --color-text-secondary: #C7CEC0;
  --color-text-muted: #9CA899;
  --color-text-inverse: #171A17;

  --color-border: rgba(218, 229, 211, 0.16);
  --color-border-subtle: rgba(218, 229, 211, 0.10);
  --color-border-strong: rgba(218, 229, 211, 0.28);

  --color-brand: #9CCF8B;
  --color-brand-hover: #B5DDA7;
  --color-brand-active: #C6E8B9;
  --color-brand-foreground: #171A17;
  --color-brand-soft: color-mix(in srgb, var(--color-brand) 16%, transparent);

  --color-secondary: #C4B7A6;
  --color-accent: #D6A35E;
  --color-accent-editorial: var(--color-accent);
  --color-link: #B5DDA7;
  --color-link-hover: #D1EBC8;
  --color-link-visited: #C7CEC0;
  --color-focus: #8DB7FF;
  --color-nav-surface: color-mix(in srgb, var(--color-surface) 94%, transparent);

  --color-success: #7BC89A;
  --color-success-foreground: #7BC89A;
  --color-success-background: color-mix(in srgb, var(--color-success-foreground) 16%, var(--color-surface));
  --color-success-border: color-mix(in srgb, var(--color-success-foreground) 48%, var(--color-surface));
  --color-warning: #E0B45C;
  --color-warning-foreground: #E0B45C;
  --color-warning-background: color-mix(in srgb, var(--color-warning-foreground) 16%, var(--color-surface));
  --color-warning-border: color-mix(in srgb, var(--color-warning-foreground) 48%, var(--color-surface));
  --color-error: #F08A8A;
  --color-error-foreground: #F08A8A;
  --color-error-background: color-mix(in srgb, var(--color-error-foreground) 16%, var(--color-surface));
  --color-error-border: color-mix(in srgb, var(--color-error-foreground) 48%, var(--color-surface));
  --color-info: #83B8D1;
  --color-info-foreground: #83B8D1;
  --color-info-background: color-mix(in srgb, var(--color-info-foreground) 16%, var(--color-surface));
  --color-info-border: color-mix(in srgb, var(--color-info-foreground) 48%, var(--color-surface));

  --color-disabled-text: #72786F;
  --color-disabled-surface: #2B302A;
  --color-disabled-border: #3A4038;
  --color-selected: var(--color-brand);
  --color-selected-background: color-mix(in srgb, var(--color-brand) 18%, var(--color-surface));
  --color-overlay: rgba(7, 10, 8, 0.72);
  --color-shadow: rgba(0, 0, 0, 0.34);
  --color-danger: var(--color-error-foreground);
  --color-dialog-surface: var(--color-surface-raised);
  --color-dialog-backdrop: var(--color-overlay);
  --color-dialog-action-surface: var(--color-surface-raised);

  --navy: var(--color-text-heading);
  --navy-2: var(--color-success-foreground);
  --navy-3: var(--color-brand);
  --navy-4: var(--color-text-muted);
  --sand: var(--color-secondary);
  --sand-2: var(--color-secondary);
  --sienna: var(--color-brand);
  --sienna-lt: var(--color-brand-hover);
  --sienna-wash: var(--color-surface-subtle);
  --gold: var(--color-accent);
  --cream: var(--color-page);
  --cream-2: var(--color-surface);
  --cream-3: var(--color-surface-subtle);
  --rule: var(--color-border);
  --rule-strong: var(--color-border-strong);
  --ink: var(--color-text-primary);
  --ink-2: var(--color-text-secondary);
  --ink-3: var(--color-text-secondary);
  --ink-4: var(--color-text-muted);
  --parchment: var(--color-page);
  --parchment-2: var(--color-surface);
  --parchment-3: var(--color-surface-subtle);
  --olive: var(--color-brand);
  --olive-light: var(--color-brand-hover);
  --brand: var(--color-brand);
  --accent: var(--color-accent);
  --paper: var(--color-surface-raised);
}

/* Route-local declarations in the legacy stylesheet inherit this contract. */
html[data-theme="light"] body > .page.active,
html[data-theme-preview="softer-light"] body > .page.active,
html[data-theme="dark"] body > .page.active,
html[data-theme-preview="dark"] body > .page.active,
html[data-theme="light"] .footer,
html[data-theme-preview="softer-light"] .footer,
html[data-theme="dark"] .footer,
html[data-theme-preview="dark"] .footer {
  color: var(--color-text-primary);
  background: var(--color-page);
}

/* Keep the reader drawer boundary deterministic in both stored and preview
   themes; the legacy rule only declared the inline edge. */
html[data-theme="light"] #page-teachings.active .teach-sidebar,
html[data-theme-preview="softer-light"] #page-teachings.active .teach-sidebar,
html[data-theme="dark"] #page-teachings.active .teach-sidebar,
html[data-theme-preview="dark"] #page-teachings.active .teach-sidebar {
  border-color: var(--color-border) !important;
}

/* Reader mode selector: keep the selected control legible in light mode too.
   The legacy rule paired a dark green active surface with brown secondary
   text, which weakened the selected label. */
html[data-theme="light"] #page-teachings.active .reader-mode-selector,
html[data-theme-preview="softer-light"] #page-teachings.active .reader-mode-selector,
html[data-theme="dark"] #page-teachings.active .reader-mode-selector,
html[data-theme-preview="dark"] #page-teachings.active .reader-mode-selector {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
}

html[data-theme="light"] #page-teachings.active .reader-mode-option,
html[data-theme-preview="softer-light"] #page-teachings.active .reader-mode-option {
  color: var(--color-text-secondary);
}

html[data-theme="light"] #page-teachings.active .reader-mode-option:hover,
html[data-theme="light"] #page-teachings.active .reader-mode-option:focus-visible,
html[data-theme-preview="softer-light"] #page-teachings.active .reader-mode-option:hover,
html[data-theme-preview="softer-light"] #page-teachings.active .reader-mode-option:focus-visible {
  background: var(--color-brand-soft);
  color: var(--color-brand-active);
}

html[data-theme="light"] #page-teachings.active .reader-mode-option.is-active,
html[data-theme-preview="softer-light"] #page-teachings.active .reader-mode-option.is-active {
  background: var(--color-brand);
  color: var(--color-brand-foreground);
  box-shadow: 0 4px 14px var(--color-shadow);
}

html:is([data-theme="light"], [data-theme-preview="softer-light"]) #page-teachings.active .reader-mode-option.is-active:hover,
html:is([data-theme="light"], [data-theme-preview="softer-light"]) #page-teachings.active .reader-mode-option.is-active:focus-visible {
  background: var(--color-brand-hover);
  color: var(--color-brand-foreground);
}

/* Interlinear uses a dedicated legacy token family. Bind those roles to the
   same dark green semantic surfaces as the rest of Keryg so its workspace
   does not fall back to the retired brown palette. */
html[data-theme="dark"] #page-teachings.active,
html[data-theme-preview="dark"] #page-teachings.active {
  --color-interlinear-surface: var(--color-surface);
  --color-interlinear-raised: var(--color-surface-raised);
  --color-interlinear-token: var(--color-surface-subtle);
  --color-interlinear-original: var(--color-text-primary);
  --color-interlinear-transliteration: var(--color-text-secondary);
  --color-interlinear-gloss: var(--color-text-secondary);
  --color-interlinear-morphology: var(--color-text-muted);
  --color-interlinear-strongs: var(--color-brand);
  --color-interlinear-divider: var(--color-border);
  --color-interlinear-selected: var(--color-selected-background);
  --color-interlinear-focused: var(--color-accent);
  --color-interlinear-hover: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
  --color-lexical-surface: var(--color-surface-raised);
  --color-lexical-raised: var(--color-surface);
  --color-lexical-secondary: var(--color-text-muted);
  --color-commentary-surface: var(--color-surface-raised);
  --color-study-surface: var(--color-surface-raised);
  --color-study-surface-border: var(--color-border);
  --color-study-tab-surface: var(--color-surface);
  --color-dialog-surface: var(--color-surface-raised);
  --color-nav-surface: var(--color-surface);
}

/* Some older routes scoped their own theme variables on the active page.
   Override those declarations once, at the page boundary, so every child
   component receives the same V2 contract. */
html[data-theme="light"] body > :is(
  #page-home, #page-teachings, #page-apologetics, #page-books, #page-guides,
  #page-guide-authoring, #page-guide-series, #page-guide-chapter,
  #page-about, #page-updates, #page-statement-of-faith, #page-interpretation,
  #page-editorial-standards, #page-languages, #page-credits, #page-attribution,
  #page-faq, #page-services, #page-contact, #page-privacy, #page-terms
).page.active,
html[data-theme-preview="softer-light"] body > :is(
  #page-home, #page-teachings, #page-apologetics, #page-books, #page-guides,
  #page-guide-authoring, #page-guide-series, #page-guide-chapter,
  #page-about, #page-updates, #page-statement-of-faith, #page-interpretation,
  #page-editorial-standards, #page-languages, #page-credits, #page-attribution,
  #page-faq, #page-services, #page-contact, #page-privacy, #page-terms
).page.active {
  --color-page: #F1EEE6;
  --color-surface: #E9E5DA;
  --color-surface-raised: #F7F4ED;
  --color-surface-subtle: #DED9CC;
  --color-surface-muted: var(--color-surface-subtle);
  --color-text-primary: #1A2C20;
  --color-text: var(--color-text-primary);
  --color-text-heading: #102517;
  --color-text-secondary: #365A45;
  --color-text-muted: #5D7F6A;
  --color-border: rgba(16, 37, 23, 0.14);
  --color-border-strong: rgba(16, 37, 23, 0.24);
  --color-brand: #2F6B45;
  --color-brand-hover: #245537;
  --color-link: #2F6B45;
  --color-link-hover: #245537;
  --color-focus: #2B6CB0;
  --color-overlay: rgba(16, 37, 23, 0.30);
  --color-shadow: rgba(16, 37, 23, 0.12);
}

html[data-theme="dark"] body > :is(
  #page-home, #page-teachings, #page-apologetics, #page-books, #page-guides,
  #page-guide-authoring, #page-guide-series, #page-guide-chapter,
  #page-about, #page-updates, #page-statement-of-faith, #page-interpretation,
  #page-editorial-standards, #page-languages, #page-credits, #page-attribution,
  #page-faq, #page-services, #page-contact, #page-privacy, #page-terms
).page.active,
html[data-theme-preview="dark"] body > :is(
  #page-home, #page-teachings, #page-apologetics, #page-books, #page-guides,
  #page-guide-authoring, #page-guide-series, #page-guide-chapter,
  #page-about, #page-updates, #page-statement-of-faith, #page-interpretation,
  #page-editorial-standards, #page-languages, #page-credits, #page-attribution,
  #page-faq, #page-services, #page-contact, #page-privacy, #page-terms
).page.active {
  --color-page: #171A17;
  --color-surface: #20241F;
  --color-surface-raised: #292E28;
  --color-surface-subtle: #30372F;
  --color-surface-muted: var(--color-surface-subtle);
  --color-surface-inverse: #0E120F;
  --color-text-primary: #E9E8DE;
  --color-text: var(--color-text-primary);
  --color-text-heading: #F6F5EC;
  --color-text-secondary: #C7CEC0;
  --color-text-muted: #9CA899;
  --color-border: rgba(218, 229, 211, 0.16);
  --color-border-strong: rgba(218, 229, 211, 0.28);
  --color-brand: #9CCF8B;
  --color-brand-hover: #B5DDA7;
  --color-link: #B5DDA7;
  --color-link-hover: #D1EBC8;
  --color-focus: #8DB7FF;
  --color-overlay: rgba(7, 10, 8, 0.72);
  --color-shadow: rgba(0, 0, 0, 0.34);
}

/* Shared interactive states. Meaningful state is never color-only. */
body :is(a, button, input, select, textarea, summary):focus-visible {
  outline-color: var(--color-focus);
}

body :is(input, select, textarea):disabled,
body :is(button, input, select, textarea)[aria-disabled="true"] {
  color: var(--color-disabled-text);
  background-color: var(--color-disabled-surface);
  border-color: var(--color-disabled-border);
}

/* Status roles are available to shared alerts without introducing a new UI API. */
body :is([role="alert"], .is-error, .error, .status-error) {
  --status-foreground: var(--color-error-foreground);
  --status-background: var(--color-error-background);
  --status-border: var(--color-error-border);
}

body :is([role="status"], .is-success, .success, .status-success) {
  --status-foreground: var(--color-success-foreground);
  --status-background: var(--color-success-background);
  --status-border: var(--color-success-border);
}

body :is(.is-warning, .warning, .status-warning) {
  --status-foreground: var(--color-warning-foreground);
  --status-background: var(--color-warning-background);
  --status-border: var(--color-warning-border);
}

body :is(.is-info, .info, .status-info) {
  --status-foreground: var(--color-info-foreground);
  --status-background: var(--color-info-background);
  --status-border: var(--color-info-border);
}

/* Public theme controller and generic page surfaces consume V2 directly. */
body,
.page,
.nav,
.footer,
.entry-card,
.study-mode-panel,
.interlinear-inspector,
.apologetics-modal,
.privacy-banner,
.privacy-settings-dialog {
  color: var(--color-text-primary);
}

body { background: var(--color-page); }

.nav,
.footer { background-color: var(--color-surface); }

.btn-primary {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-brand-foreground);
}

.btn-primary:hover,
.btn-primary:active { background: var(--color-brand-hover); border-color: var(--color-brand-hover); }

.btn-primary:focus-visible,
.btn-secondary:focus-visible { outline-color: var(--color-focus); }

.btn-secondary { color: var(--color-link); }
.btn-secondary:hover { color: var(--color-link-hover); }

body :is(input, select, textarea) {
  background-color: var(--color-surface-raised);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

body :is(input, select, textarea)::placeholder { color: var(--color-text-muted); opacity: 1; }

body :is([role="alert"], .is-error, .error, .status-error,
  [role="status"], .is-success, .success, .status-success,
  .is-warning, .warning, .status-warning,
  .is-info, .info, .status-info) {
  background-color: var(--status-background, transparent);
  border-color: var(--status-border, var(--color-border));
  color: var(--status-foreground, var(--color-text-primary));
}

.footer,
.entry-card,
.study-mode-panel,
.interlinear-inspector,
.apologetics-modal,
.privacy-banner,
.privacy-settings-dialog {
  border-color: var(--color-border);
}

body :where(a, .nav-link, .footer-link) {
  color: var(--color-link);
}

body :where(a, .nav-link, .footer-link):hover,
body :where(a, .nav-link, .footer-link):focus-visible {
  color: var(--color-link-hover);
}

/* Keep the shared shell on the same dark canvas as the content. The older
   dark-theme spike gave the navigation and footer their own brown surface,
   which made the site feel like two color systems. Reuse the approved page
   color instead of introducing another shell shade. */
html:is([data-theme="dark"], [data-theme-preview="dark"]) :is(.nav, .footer, .footer-panel) {
  background-color: var(--color-surface-inverse) !important;
}

/* Navigation labels stay neutral; active color and weight carry the state
   without turning the primary site navigation into a row of divided cells. */
.nav .nav-link {
  color: var(--color-text-primary);
}

.nav .nav-link:hover,
.nav .nav-link:focus-visible,
.nav .nav-link.active {
  color: var(--color-text-heading);
  font-weight: 500;
}

.btn-primary,
body :is(.is-selected, .is-active, [aria-selected="true"], [aria-pressed="true"]) {
  --interactive-foreground: var(--color-brand-foreground);
  --interactive-background: var(--color-brand);
}

/* The CTA eyebrow sits on an inverse surface. Use the inverse-surface text
   role instead of the muted secondary accent so the label remains readable
   in both themes. */
.footer-cta-eyebrow {
  color: var(--color-brand-foreground);
}

html[data-theme="dark"] .footer-cta-eyebrow,
html[data-theme-preview="dark"] .footer-cta-eyebrow {
  color: var(--color-text-heading);
}

/* Apologetics answer actions previously paired the inverse green fill with
   the brown secondary text role. Use the shared brand foreground so every
   compact answer CTA remains readable in both themes. */
.apologetics-answer-link:not(.apologetics-answer-link--nav) {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-brand-foreground);
}

.apologetics-answer-link:not(.apologetics-answer-link--nav):hover,
.apologetics-answer-link:not(.apologetics-answer-link--nav):focus-visible {
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
  color: var(--color-brand-foreground);
}

/* Question-reader navigation is clearer as text-led cards. Keep the
   hierarchy in the label and subtitle instead of decorative icon circles. */
.apologetics-modal .apologetics-answer-link--nav {
  border-color: var(--color-border-strong);
}

.apologetics-modal .apologetics-answer-link--nav .apologetics-answer-link-label {
  color: var(--color-text-heading);
}

.apologetics-modal .apologetics-answer-link--nav .apologetics-answer-link-subtitle {
  color: var(--color-text-primary);
}

/* The primary Next action uses a light brand surface in dark mode. Its
   label and destination must use the matching dark foreground, not the
   modal's light text hierarchy. */
.apologetics-modal .apologetics-answer-link--nav.apologetics-answer-link--primary .apologetics-answer-link-label,
.apologetics-modal .apologetics-answer-link--nav.apologetics-answer-link--primary .apologetics-answer-link-subtitle {
  color: var(--color-brand-foreground);
}

.apologetics-modal .apologetics-answer-link--nav[disabled],
.apologetics-modal .apologetics-answer-link--nav[disabled]:hover {
  opacity: 0.72;
}

/* The modal's dark-theme rules are intentionally scoped more narrowly than
   the shared component styles; keep this refinement equally specific so the
   text-led controls stay readable in dark mode too. */
html:is([data-theme="dark"], [data-theme-preview="dark"]) .apologetics-modal .apologetics-answer-link--nav {
  border-color: var(--color-border-strong);
}

html:is([data-theme="dark"], [data-theme-preview="dark"]) .apologetics-modal .apologetics-answer-link--nav .apologetics-answer-link-subtitle {
  color: var(--color-text-primary);
}

html:is([data-theme="dark"], [data-theme-preview="dark"]) .apologetics-modal .apologetics-answer-link--nav.apologetics-answer-link--primary .apologetics-answer-link-label,
html:is([data-theme="dark"], [data-theme-preview="dark"]) .apologetics-modal .apologetics-answer-link--nav.apologetics-answer-link--primary .apologetics-answer-link-subtitle {
  color: var(--color-brand-foreground);
}

html:is([data-theme="dark"], [data-theme-preview="dark"]) .apologetics-modal .apologetics-answer-link--nav[disabled],
html:is([data-theme="dark"], [data-theme-preview="dark"]) .apologetics-modal .apologetics-answer-link--nav[disabled]:hover {
  border-color: var(--color-border-strong);
  opacity: 0.74;
}