/* settheme.css */

/* Apply custom theme when data-theme="settheme"
   or when a theme controller selects it */
:root:has(input.theme-controller[value="settheme"]:checked),
[data-theme="settheme"] {
   color-scheme: light;
   --font-body: "arimo", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --font-heading: "comfortaa", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

   --color-base-100: oklch(98% 0.002 247.839);
   --color-base-200: oklch(96% 0.003 264.542);
   --color-base-300: oklch(92% 0.006 264.531);
   --color-base-content: oklch(21% 0.034 264.665);

   --color-primary: hsl(108.26, 95.83%, 18.82%);
   --color-primary-content: oklch(100% 0 0);

   --color-secondary: oklch(0% 0 0);
   --color-secondary-content: oklch(100% 0 0);

   --color-accent: #003b95;
   --color-accent-content: oklch(100% 0 0);

   --color-neutral: #003b95;
   --color-neutral-content: oklch(100% 0 0);

   --color-info: #003b95;
   --color-info-content: oklch(100% 0 0);

   --color-success: oklch(64% 0.2 131.684);
   --color-success-content: oklch(98% 0.031 120.757);

   --color-warning: #d08700;
   --color-warning-content: oklch(98% 0.026 102.212);

   --color-error: oklch(57% 0.245 27.325);
   --color-error-content: oklch(97% 0.014 343.198);

   --radius-selector: 0.25rem;
   --radius-field: 0.25rem;
   --radius-box: 0.25rem;

   --size-selector: 0.3125rem;
   --size-field: 0.25rem;

   --border: 2px;
   --depth: 1;
   --noise: 1;

   /* === THEME-COMPLIANT TYPOGRAPHY TOKENS === */
   /* Headings should follow the base content color for good contrast in all themes. */
   --bde-headings-color: var(--color-base-content);

   /* === THEME-COMPLIANT LINK TOKENS ===
         Base link color uses accent; hover is a mix of accent + base-content,
         so we stay strictly within theme-defined colors. */
   --bde-links-color: var(--color-accent);
   --bde-links-color-hover: color-mix(in srgb,
         var(--color-accent) 75%,
         var(--color-base-content) 25%);
}

/* mobile nav menu */
/* Fallback: hide the mobile overlay when aria-hidden="true" */
body:has(#mobile-menu-list[aria-hidden="false"]) {
   overflow: hidden;
}

/* (Optional) ensure visibility when opened, in case other CSS interferes */
#mobile-menu-list[aria-hidden="false"] {
   display: block;
}

body:has(#mobile-menu-list[aria-hidden="false"]:not(.hidden)) {
   overflow: hidden;
}

[data-theme="settheme"] #mobile-menu-list summary {
   display: unset;
   display: grid;
}

/* ================================
   View Transition API – global config
   ================================ */

/* Prevent scrolling while bootloader is visible or .boot is still attached */
body:has(#bootloader:not(.hide)),
body:has(.boot) {
   overflow: hidden;
}

/* Cross-document transitions, only when motion is allowed */
@media (prefers-reduced-motion: no-preference) {
   @view-transition {
      navigation: auto;
   }

   /* Main app container participates in transitions */
   .app-root {
      view-transition-name: app-root;
   }

   /* Bootloader and other transient UI should NOT transition */
   #bootloader {
      view-transition-name: none;
   }
}

/* When users prefer reduced motion, disable snapshots entirely */
@media (prefers-reduced-motion: reduce) {
   * {
      view-transition-name: none !important;
   }
}