/* 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;

  --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: oklch(0% 0 0);
  --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;
  }
}