/**
 * Maps Pico CSS design tokens to the Boma brand (purple → cyan, dark UI).
 * Loaded after Pico classless, before boma-theme.css.
 */
[data-theme="dark"],
:root:not([data-theme="light"]) {
  --pico-font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  --pico-font-size: 100%;
  --pico-line-height: 1.5;
  --pico-border-radius: 0.875rem;
  --pico-spacing: 1rem;

  --pico-background-color: #020203;
  --pico-color: #f1f5f9;
  --pico-muted-color: rgba(196, 181, 253, 0.72);
  --pico-muted-border-color: rgba(255, 255, 255, 0.08);
  --pico-primary: #a5f3fc;
  --pico-primary-background: #7c3aed;
  --pico-primary-hover: #cffafe;
  --pico-primary-hover-background: #6d28d9;
  --pico-primary-focus: rgba(34, 211, 238, 0.45);
  --pico-primary-inverse: #fff;
  --pico-secondary: rgba(196, 181, 253, 0.85);
  --pico-secondary-hover: #e9d5ff;
  --pico-secondary-focus: rgba(124, 58, 237, 0.35);
  --pico-secondary-inverse: #fff;
  --pico-contrast: #f8fafc;
  --pico-contrast-background: rgba(255, 255, 255, 0.06);
  --pico-contrast-hover: #fff;
  --pico-contrast-hover-background: rgba(255, 255, 255, 0.1);
  --pico-contrast-focus: rgba(34, 211, 238, 0.35);
  --pico-contrast-inverse: #020203;
  --pico-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.25);
  --pico-card-background-color: rgba(255, 255, 255, 0.035);
  --pico-card-sectioning-background-color: rgba(255, 255, 255, 0.03);
  --pico-card-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  --pico-outline-width: 0.125rem;
  --pico-outline-color: rgba(34, 211, 238, 0.55);
}

html[dir="rtl"][data-theme="dark"] {
  --pico-font-family: "Noto Sans Arabic", "Plus Jakarta Sans", system-ui, sans-serif;
}

/* Branded components keep Boma styles — neutralize Pico element defaults */
body.boma-page :is(
  .boma-nav-link,
  .boma-nav-dropdown-trigger,
  .boma-nav-dropdown-link,
  .boma-header-cta,
  .boma-btn-primary,
  .boma-btn-secondary,
  .boma-card-link,
  .boma-category-pill,
  .boma-extra-pill,
  .boma-social-btn,
  .boma-lang-switch a,
  .boma-footer-links a,
  .boma-mobile-nav-list a,
  .boma-mobile-nav-link,
  .boma-mobile-nav-cta,
  .boma-link
) {
  --pico-background-color: transparent;
  --pico-border-color: transparent;
  --pico-box-shadow: none;
}

body.boma-page .boma-card :is(.boma-card-title, .boma-card-desc) {
  margin: 0;
}

body.boma-page article > header,
body.boma-page article > footer {
  margin: 0;
  padding: 0;
}

/* Pico flexes nav children horizontally — force mobile drawer to one column */
body.boma-page .boma-mobile-drawer-stack,
body.boma-page .boma-mobile-drawer-lang,
body.boma-page .boma-mobile-drawer .boma-lang-switch,
body.boma-page .boma-mobile-drawer .boma-mobile-nav-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

body.boma-page .boma-mobile-drawer .boma-lang-switch ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

/* Pico sets `ul li { list-style: square }` — strip markers on layout lists */
body.boma-page :is(
  .boma-link-grid,
  .boma-category-nav-list,
  .boma-social-list,
  .boma-city-list,
  .boma-mobile-nav-list,
  .boma-mobile-nav-heading,
  .boma-nav-dropdown-menu,
  .boma-link-list,
  .boma-lang-switch ul,
  .boma-nav-desktop > ul
) > li {
  list-style: none;
}

body.boma-page :is(
  .boma-link-grid,
  .boma-category-nav-list,
  .boma-social-list,
  .boma-city-list,
  .boma-mobile-nav-list,
  .boma-mobile-nav-heading,
  .boma-nav-dropdown-menu,
  .boma-link-list,
  .boma-lang-switch ul,
  .boma-nav-desktop > ul
) > li::marker {
  content: none;
}