/* =========================================================================
 * Niyal Modern UI  —  PREMIUM layer  (applies in BOTH light & dark)
 * Apple-inspired: large soft corners, layered shadows, glass, SF typography,
 * fluid micro-interactions. Theme-agnostic base + design tokens consumed by the
 * per-theme skins. Loads on any site when "Premium UI" is enabled.
 * ========================================================================= */

:root {
  /* Corner radii — Apple-like generous rounding */
  --nmui-r-xs: 10px;
  --nmui-r-sm: 14px;
  --nmui-r-md: 20px;
  --nmui-r-lg: 28px;
  --nmui-r-xl: 36px;
  --nmui-r-pill: 999px;

  /* Layered soft shadows */
  --nmui-shadow-sm: 0 1px 2px rgba(17, 17, 26, .06), 0 2px 6px rgba(17, 17, 26, .06);
  --nmui-shadow-md: 0 4px 14px rgba(17, 17, 26, .08), 0 10px 30px rgba(17, 17, 26, .07);
  --nmui-shadow-lg: 0 8px 24px rgba(17, 17, 26, .10), 0 24px 60px rgba(17, 17, 26, .12);
  --nmui-ring: 0 0 0 4px color-mix(in srgb, var(--nmui-accent, #e4422e) 28%, transparent);

  /* Motion */
  --nmui-ease: cubic-bezier(.4, 0, .2, 1);
  --nmui-tr: .28s var(--nmui-ease);

  /* Type — San-Francisco-first system stack */
  --nmui-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Glass surfaces */
  --nmui-glass-light: rgba(255, 255, 255, .72);
  --nmui-glass-dark: rgba(20, 22, 28, .62);
}

/* Dark-mode shadow tuning (deeper, softer) */
html[data-theme="dark"] {
  --nmui-shadow-sm: 0 1px 2px rgba(0, 0, 0, .40), 0 2px 8px rgba(0, 0, 0, .35);
  --nmui-shadow-md: 0 6px 18px rgba(0, 0, 0, .45), 0 14px 40px rgba(0, 0, 0, .40);
  --nmui-shadow-lg: 0 10px 30px rgba(0, 0, 0, .50), 0 30px 70px rgba(0, 0, 0, .55);
}

/* -------------------- generic, theme-safe premium polish ------------------ */
html.nmui-premium body {
  font-family: var(--nmui-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

html.nmui-premium h1,
html.nmui-premium h2,
html.nmui-premium h3 { letter-spacing: -.02em; }

/* Refined, accessible focus ring everywhere */
html.nmui-premium :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--nmui-ring);
  border-radius: var(--nmui-r-xs);
}

/* Accent text selection */
html.nmui-premium ::selection {
  background: color-mix(in srgb, var(--nmui-accent, #e4422e) 26%, transparent);
}

/* Buttons & inputs pick up soft corners + motion generically */
html.nmui-premium :is(button, .button, .btn, input[type="submit"]) {
  border-radius: var(--nmui-r-pill);
  transition: transform var(--nmui-tr), box-shadow var(--nmui-tr), background var(--nmui-tr), filter var(--nmui-tr);
}
html.nmui-premium :is(button, .button, .btn, input[type="submit"]):hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}
html.nmui-premium :is(input[type="text"], input[type="search"], input[type="email"], textarea, select) {
  border-radius: var(--nmui-r-sm);
  transition: box-shadow var(--nmui-tr), border-color var(--nmui-tr), background var(--nmui-tr);
}

/* Nicer thin scrollbar */
html.nmui-premium * { scrollbar-width: thin; }
html.nmui-premium ::-webkit-scrollbar { width: 10px; height: 10px; }
html.nmui-premium ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--nmui-accent, #e4422e) 35%, transparent);
  border-radius: var(--nmui-r-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}

/* Premium upgrade of the floating toggle: subtle gradient + glass ring */
html.nmui-premium .nmui-toggle {
  background: linear-gradient(145deg, color-mix(in srgb, var(--nmui-accent, #e4422e) 92%, #fff), var(--nmui-accent, #e4422e));
  box-shadow: var(--nmui-shadow-md), inset 0 1px 0 rgba(255, 255, 255, .25);
  backdrop-filter: saturate(140%);
}
html.nmui-premium .nmui-toggle:hover { box-shadow: var(--nmui-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .3); }

@media (prefers-reduced-motion: reduce) {
  html.nmui-premium body { scroll-behavior: auto; }
}