/*
 * Dark theme for the pages built on _inc/site.php (site.css and site-clasic.css), for visitors whose
 * device is set to dark. Colours only: no layout, sizes or fonts. Loaded after the theme stylesheet
 * with media="(prefers-color-scheme: dark)". Photos are never filtered; the logo (navy on transparent)
 * gets a light background so it stays readable.
 */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ad-bg: #16181c;
    --ad-surface: #1f2228;
    --ad-surface-2: #282c33;
    --ad-sand: #23211e;        /* replaces the opaque sandy backgrounds */
    --ad-border: rgba(255, 255, 255, .13);
    --ad-text: #e6e9ee;        /* replaces darkBlue text */
    --ad-navy: #263354;        /* kept on light-blue buttons */
  }

  html, body { background-color: var(--ad-bg); color: var(--ad-text); }

  /* Logo: navy artwork on transparent, so it gets a light backing */
  #antet a.flex-shrink-0 img { background-color: #f4f1ec; }

  /* Navy text -> light text (same alpha steps, a bit higher so the faint ones keep 4.5:1) */
  .text-darkBlue, .hover\:text-darkBlue:hover { color: var(--ad-text); }
  .text-darkBlue\/80 { color: rgba(230, 233, 238, .86); }
  .text-darkBlue\/70 { color: rgba(230, 233, 238, .8); }
  .text-darkBlue\/60 { color: rgba(230, 233, 238, .74); }
  .text-darkBlue\/50 { color: rgba(230, 233, 238, .68); }
  .text-darkBlue\/40 { color: rgba(230, 233, 238, .62); }
  .text-darkBlue\/30 { color: rgba(230, 233, 238, .55); }
  .text-purpleDark { color: #e4b9de; }
  .border-purpleDark { border-color: #b884b1; }
  .text-red-700 { color: #fca5a5; }
  .text-red-600 { color: #f8a0a0; }
  svg[stroke="#263354"] { stroke: var(--ad-text); }

  /* Opaque light backgrounds -> dark surfaces */
  .bg-white { background-color: var(--ad-surface); }
  .bg-white\/90 { background-color: rgba(31, 34, 40, .92); }
  .bg-white\/70 { background-color: rgba(31, 34, 40, .78); }
  .bg-white\/50 { background-color: rgba(31, 34, 40, .6); }
  .bg-white\/10 { background-color: rgba(255, 255, 255, .08); }
  #antet { background-color: var(--ad-surface); }
  .bg-sandy { background-color: var(--ad-sand); }
  .bg-sandy\/10 { background-color: rgba(227, 217, 204, .03); }
  .bg-sandy\/20 { background-color: rgba(227, 217, 204, .05); }
  .bg-sandy\/40 { background-color: rgba(227, 217, 204, .07); }
  .hover\:bg-sandy\/30:hover { background-color: rgba(227, 217, 204, .1); }
  .hover\:bg-sandy:hover { background-color: #34302b; }
  .bg-gray-200 { background-color: var(--ad-surface-2); }
  .bg-red-50 { background-color: #3a1e20; }
  .bg-green-50 { background-color: #1c3324; }
  .text-green-700 { color: #a7dcb5; }
  .border-red-200 { border-color: #7a3a3e; }

  /* Gradients: light stops -> dark ones */
  .from-white { --tw-gradient-from: var(--ad-bg) var(--tw-gradient-from-position); --tw-gradient-to: rgba(22, 24, 28, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
  .via-white { --tw-gradient-to: rgba(22, 24, 28, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--ad-bg) var(--tw-gradient-via-position), var(--tw-gradient-to); }
  .to-white { --tw-gradient-to: var(--ad-bg) var(--tw-gradient-to-position); }
  .from-sandy\/30 { --tw-gradient-from: rgba(227, 217, 204, .07) var(--tw-gradient-from-position); --tw-gradient-to: rgba(227, 217, 204, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
  .from-sandy\/20 { --tw-gradient-from: rgba(227, 217, 204, .05) var(--tw-gradient-from-position); --tw-gradient-to: rgba(227, 217, 204, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
  .via-sandy\/20 { --tw-gradient-to: rgba(227, 217, 204, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(227, 217, 204, .05) var(--tw-gradient-via-position), var(--tw-gradient-to); }
  .to-sandy\/30 { --tw-gradient-to: rgba(227, 217, 204, .07) var(--tw-gradient-to-position); }
  .to-sandy\/20 { --tw-gradient-to: rgba(227, 217, 204, .05) var(--tw-gradient-to-position); }
  .to-sandy\/10 { --tw-gradient-to: rgba(227, 217, 204, .03) var(--tw-gradient-to-position); }

  /* Borders */
  .border-sandy, .border-gray-100, .border-gray-300, .border-darkBlue\/10, .border-darkBlue\/15, .border-darkBlue\/20, .border-sandy\/50 { border-color: var(--ad-border); }
  .border-darkBlue, .border-t-darkBlue { border-color: #8ea0c4; }
  .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .hover\:shadow-md:hover { --tw-shadow-color: rgba(0, 0, 0, .5); }

  /* Light-blue buttons and badges keep navy text (also on their children) */
  .bg-lightBlue, .bg-lightBlue.text-darkBlue, .bg-lightBlue .text-darkBlue,
  .bg-lightBlue .text-darkBlue\/80, .bg-lightBlue .text-darkBlue\/70, .bg-lightBlue .text-darkBlue\/60 { color: var(--ad-navy); }
  .bg-lightBlue svg[stroke="#263354"] { stroke: var(--ad-navy); }
  /* Navy buttons/bands: a bit lighter than the page so they stay visible */
  .bg-darkBlue { background-color: #2c3b62; }
  .hover\:bg-darkBlue:hover { background-color: #3a4c7a; }

  /* Forms */
  input, textarea, select { color: var(--ad-text); }
  input.bg-white, textarea.bg-white, select.bg-white,
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), textarea, select {
    background-color: var(--ad-surface-2);
    border-color: rgba(255, 255, 255, .22);
  }
  input::placeholder, textarea::placeholder { color: rgba(230, 233, 238, .55); opacity: 1; }
  .focus\:ring-offset-2:focus { --tw-ring-offset-color: var(--ad-bg); }

  /* Long-form text of the policy pages and FEMIS lessons (.prose / .femis-continut) */
  .prose, .femis-continut { color: rgba(230, 233, 238, .88); }
  .prose :is(h1, h2, h3, h4, strong, a), .femis-continut :is(h1, h2, h3, h4, strong) { color: var(--ad-text); }
  .femis-continut a { color: #a9c6ef; }
  .femis-continut blockquote { background-color: var(--ad-sand); }

  html { scrollbar-color: #454a52 var(--ad-bg); }
}