/* ExactFind block theme: dark mode.
   theme.json defines the light palette. This file remaps the same semantic
   preset slugs for dark mode, so every block that uses a palette colour
   switches automatically. Enqueue on the front end and in the editor.

   Rules:
   - Follows the visitor's system setting by default.
   - The header toggle sets <html data-theme="light|dark"> and stores the choice
     in localStorage key "ef-theme". An inline script in <head> applies it
     before first paint to avoid a flash.
   - "band" sections are dark in both modes; in dark mode they lift slightly. */

:root[data-theme="dark"] {
  --wp--preset--color--base: #0E1014;
  --wp--preset--color--surface: #1A1D23;
  --wp--preset--color--surface-2: #262A31;
  --wp--preset--color--border: #262A31;
  --wp--preset--color--border-strong: #3A3F48;
  --wp--preset--color--contrast: #F2F0EA;
  --wp--preset--color--text: #C9C6BE;
  --wp--preset--color--muted: #A3A6AE;
  --wp--preset--color--accent: #4FD1A1;
  --wp--preset--color--accent-soft: #12352A;
  --wp--preset--color--unconfirmed: #F0C98A;
  --wp--preset--color--unconfirmed-soft: #33280F;
  --wp--preset--color--near-miss: #F49A8C;
  --wp--preset--color--near-miss-soft: #3A1E19;
  --wp--preset--color--band: #1A1D23;
  --wp--custom--color--accent-strong: #7EE3BD;
  --wp--custom--color--btn-bg: #4FD1A1;
  --wp--custom--color--btn-text: #0E1014;
  --wp--custom--color--nav-text: #D6D3CC;
  --wp--custom--color--badge-soon-text: #F0C98A;
  --wp--custom--color--near-miss-text: #F49A8C;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wp--preset--color--base: #0E1014;
    --wp--preset--color--surface: #1A1D23;
    --wp--preset--color--surface-2: #262A31;
    --wp--preset--color--border: #262A31;
    --wp--preset--color--border-strong: #3A3F48;
    --wp--preset--color--contrast: #F2F0EA;
    --wp--preset--color--text: #C9C6BE;
    --wp--preset--color--muted: #A3A6AE;
    --wp--preset--color--accent: #4FD1A1;
    --wp--preset--color--accent-soft: #12352A;
    --wp--preset--color--unconfirmed: #F0C98A;
    --wp--preset--color--unconfirmed-soft: #33280F;
    --wp--preset--color--near-miss: #F49A8C;
    --wp--preset--color--near-miss-soft: #3A1E19;
    --wp--preset--color--band: #1A1D23;
    --wp--custom--color--accent-strong: #7EE3BD;
    --wp--custom--color--btn-bg: #4FD1A1;
    --wp--custom--color--btn-text: #0E1014;
    --wp--custom--color--nav-text: #D6D3CC;
    --wp--custom--color--badge-soon-text: #F0C98A;
  --wp--custom--color--near-miss-text: #F49A8C;
    color-scheme: dark;
  }
}

/* Logo: inline SVG uses currentColor for the frame and a CSS variable for the square,
   so one SVG works in both modes:
   <svg class="ef-mark"><path stroke="currentColor" .../><rect fill="var(--ef-logo-match)" .../></svg> */
:root { --ef-logo-match: #0B7A5A; }
:root[data-theme="dark"] { --ef-logo-match: #4FD1A1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ef-logo-match: #4FD1A1; } }

/* Example-site mockups (browser frames) keep their own fictional brand colours
   in both modes. They show how the widget adopts each site's look. */

/* Scoped colour schemes, used by the styleguide to show light and dark side by side.
   .ef-scheme-dark applies the dark values above to one subtree; .ef-scheme-light restores
   the light values (from theme.json) inside a dark page. */
.ef-scheme-dark {
  --wp--preset--color--base: #0E1014;
  --wp--preset--color--surface: #1A1D23;
  --wp--preset--color--surface-2: #262A31;
  --wp--preset--color--border: #262A31;
  --wp--preset--color--border-strong: #3A3F48;
  --wp--preset--color--contrast: #F2F0EA;
  --wp--preset--color--text: #C9C6BE;
  --wp--preset--color--muted: #A3A6AE;
  --wp--preset--color--accent: #4FD1A1;
  --wp--preset--color--accent-soft: #12352A;
  --wp--preset--color--unconfirmed: #F0C98A;
  --wp--preset--color--unconfirmed-soft: #33280F;
  --wp--preset--color--near-miss: #F49A8C;
  --wp--preset--color--near-miss-soft: #3A1E19;
  --wp--preset--color--band: #1A1D23;
  --wp--custom--color--accent-strong: #7EE3BD;
  --wp--custom--color--btn-bg: #4FD1A1;
  --wp--custom--color--btn-text: #0E1014;
  --wp--custom--color--nav-text: #D6D3CC;
  --wp--custom--color--badge-soon-text: #F0C98A;
  --wp--custom--color--near-miss-text: #F49A8C;
  --ef-logo-match: #4FD1A1;
  color-scheme: dark;
}

.ef-scheme-light {
  --wp--preset--color--base: #F7F6F2;
  --wp--preset--color--surface: #FFFFFF;
  --wp--preset--color--surface-2: #ECE9E1;
  --wp--preset--color--border: #DEDBD2;
  --wp--preset--color--border-strong: #C9C5BA;
  --wp--preset--color--contrast: #14161B;
  --wp--preset--color--text: #3B3E45;
  --wp--preset--color--muted: #5B5E66;
  --wp--preset--color--accent: #0B7A5A;
  --wp--preset--color--accent-soft: #E3F2EC;
  --wp--preset--color--unconfirmed: #9A5B00;
  --wp--preset--color--unconfirmed-soft: #FBF0DC;
  --wp--preset--color--near-miss: #9C3D22;
  --wp--preset--color--near-miss-soft: #F8E7DE;
  --wp--preset--color--band: #14161B;
  --wp--custom--color--accent-strong: #075A42;
  --wp--custom--color--btn-bg: #14161B;
  --wp--custom--color--btn-text: #FFFFFF;
  --wp--custom--color--nav-text: #2A2D33;
  --wp--custom--color--badge-soon-text: #7A4800;
  --wp--custom--color--near-miss-text: #7E2F18;
  --ef-logo-match: #0B7A5A;
  color-scheme: light;
}

.ef-scheme-dark,
.ef-scheme-light {
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--text);
}