/*
 * Front-end light/dark theme-mode overrides.
 *
 * Enqueued only via wp_enqueue_scripts (functions.php), NOT through
 * add_editor_style() — the block editor canvas must keep the theme.json
 * palette so previews match the "no override" state, not the visitor's
 * OS color scheme.
 *
 * These reassign the same --wp--preset--color--* variables that theme.json
 * defines, so native blocks and Tailwind utilities (which map --color-* to
 * these) re-theme together. !important is required because WordPress's own
 * global-styles stylesheet sets these on `:root` with equal specificity and
 * can be enqueued after this file depending on load order.
 *
 * IMPORTANT: these overrides target `:root`, not `body`. Tailwind's
 * `@theme` block declares `--color-background: var(--wp--preset--color--background)`
 * (and friends) exactly once, at `:root` — a custom property's var()
 * references are resolved at its declaration site, then inherited as an
 * already-resolved value. Overriding --wp--preset--color--* only on `body`
 * changes body's own copy of that variable (fine for direct uses like
 * WordPress's `body{background-color:var(--wp--preset--color--background)}`)
 * but does NOT change --color-background's frozen value from `:root`, so
 * any Tailwind utility (bg-background, text-foreground, etc.) on `header`,
 * `footer`, or any element sitting in front of `body` keeps the light-mode
 * color regardless of theme. Overriding at `:root` fixes both at once.
 *
 * CONTRAST CONTRACT (WCAG 2.1 AA). The whole palette inverts in dark mode,
 * `primary-*` and `secondary-*` included -- not just background/foreground/
 * gray. Each slug has one role, and that role holds in both modes:
 *
 *   background / lighter-gray / light-gray  the page and its raised cards
 *   foreground                              body text, and the ONE inverted
 *                                           surface (footer, lightbox scrim)
 *   primary / secondary                     accents on the page: >= 4.5:1 both
 *                                           as text on, and as a surface under,
 *                                           every gray above
 *   primary-dark                            deeper accent -- hover/pressed
 *                                           surface, and accent text on
 *                                           `light-gray`
 *   primary-light / secondary-light         accents on the INVERTED surface.
 *                                           Light mode: a light tint on the
 *                                           dark footer. Dark mode: a DARK
 *                                           tone, because the footer is light
 *                                           there. Never use these on the page.
 *
 * So `primary-light` being darker than `primary` in dark mode is deliberate:
 * the names are light-mode-relative, exactly like `light-gray` (#eaeaea in
 * light mode, #2a2a2a here). Every value below is picked from a measured
 * contrast ratio, not by eye -- re-check with a ratio calculator before
 * changing one, and see theme.json for the light-mode side of each pair.
 */

@media (prefers-color-scheme: dark) {
  :root {
    --wp--preset--color--background: #121212 !important;
    --wp--preset--color--foreground: #f2f2f2 !important;
    --wp--preset--color--light-gray: #2a2a2a !important;
    --wp--preset--color--lighter-gray: #1e1e1e !important;
    /* 9.6:1 on #121212, 7.4:1 on #2a2a2a -- works as text and as a surface. */
    --wp--preset--color--primary: #edad6e !important;
    /* Dark on purpose: 6.7:1 on the now-light footer (#f2f2f2). */
    --wp--preset--color--primary-light: #81460a !important;
    /* Hover surface: 6.8:1 under #121212, 5.2:1 as text on #2a2a2a. */
    --wp--preset--color--primary-dark: #eb7f13 !important;
    --wp--preset--color--secondary: #5cd1ff !important;
    /* Dark on purpose, like primary-light: 6.7:1 on #f2f2f2. */
    --wp--preset--color--secondary-light: #005b80 !important;
    /* Panel surface: 5.6:1 under #2a2a2a text. */
    --wp--preset--color--secondary-dark: #00acee !important;
  }
}

/*
 * Manual theme-mode toggle (see the switcher in parts/footer.html).
 * `data-theme` is set on <html> by JS/localStorage, so this needs higher
 * specificity than the plain `:root` rule above to reliably override both
 * WordPress's global styles and the OS media query — `html[data-theme="x"]`
 * beats a bare `:root` selector regardless of source order.
 */
html[data-theme="dark"] {
  --wp--preset--color--background: #121212 !important;
  --wp--preset--color--foreground: #f2f2f2 !important;
  --wp--preset--color--light-gray: #2a2a2a !important;
  --wp--preset--color--lighter-gray: #1e1e1e !important;
  /* 9.6:1 on #121212, 7.4:1 on #2a2a2a -- works as text and as a surface. */
  --wp--preset--color--primary: #edad6e !important;
  /* Dark on purpose: 6.7:1 on the now-light footer (#f2f2f2). */
  --wp--preset--color--primary-light: #81460a !important;
  /* Hover surface: 6.8:1 under #121212, 5.2:1 as text on #2a2a2a. */
  --wp--preset--color--primary-dark: #eb7f13 !important;
  --wp--preset--color--secondary: #5cd1ff !important;
  /* Dark on purpose, like primary-light: 6.7:1 on #f2f2f2. */
  --wp--preset--color--secondary-light: #005b80 !important;
  /* Panel surface: 5.6:1 under #2a2a2a text. */
  --wp--preset--color--secondary-dark: #00acee !important;
}

/* Forces light mode even when the OS is set to dark. */
/* Must mirror the theme.json palette value for value. */
html[data-theme="light"] {
  /* Warm off-white page. Foreground on it: 10.4:1. */
  --wp--preset--color--background: #E6E4D0 !important;
  --wp--preset--color--foreground: #2f2f2f !important;
  --wp--preset--color--light-gray: #E7E2D2 !important;
  --wp--preset--color--lighter-gray: #f4f4f4 !important;
  /* 4.4:1 on #E6E4D0, 4.3:1 on #E7E2D2, 5.1:1 on #f4f4f4 -- short of AA
     below text-xl on the two warm grays. */
  --wp--preset--color--primary: #AA4B26 !important;
  /* Light on purpose, for the dark footer (#2f2f2f): 3.8:1, large text only. */
  --wp--preset--color--primary-light: #D16C53 !important;
  /* Hover surface: 4.8:1 under #E6E4D0, 4.7:1 as text on #E7E2D2. */
  --wp--preset--color--primary-dark: #885726 !important;
  --wp--preset--color--secondary: #007eac !important;
  --wp--preset--color--secondary-light: #5cd1ff !important;
  --wp--preset--color--secondary-dark: #005b80 !important;
}

/*
 * Logo wordmark swap (see .site-logo in the Tailwind bundle for the
 * default, editor-safe state and for how the overlay is built). The logo
 * keeps its full colors in every mode; the only thing that moves is
 * --site-logo-text-opacity, which fades in the white "ASEK" wordmark
 * overlay wherever the logo sits on a dark surface.
 *
 * The header's background follows the site's normal mode, so its
 * near-black wordmark needs the white overlay only once dark mode turns
 * the header dark. The footer is intentionally inverted (dark in light
 * mode, light in dark mode), so its condition is the mirror image: drop
 * the overlay again once dark mode makes it light.
 *
 * This must stay out of the main Tailwind bundle (see file header) since
 * that file is also loaded into the editor canvas, which always keeps
 * light-mode colors regardless of the browser's real color scheme —
 * matching `prefers-color-scheme` there would flip the wordmark without
 * the background actually changing.
 */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) header .site-logo {
    --site-logo-text-opacity: 1 !important;
  }
  html:not([data-theme="light"]) footer .site-logo {
    --site-logo-text-opacity: 0 !important;
  }
}
html[data-theme="dark"] header .site-logo {
  --site-logo-text-opacity: 1 !important;
}
html[data-theme="dark"] footer .site-logo {
  --site-logo-text-opacity: 0 !important;
}