/* Design tokens: colours, spacing, and the configurable alert widths.
   Defined once on :root; a light-scheme override follows. Everything else references
   these custom properties so the palette lives in one place. */

:root {
  --al-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* page */
  --al-bg: #0e1726;
  --al-fg: #e8ecf3;

  /* alert type accents */
  --al-info: #3b82f6;
  --al-success: #22c55e;
  --al-warning: #f59e0b;
  --al-error: #ef4444;
  --al-muted: #6b7280;

  /* alert card surface */
  --al-card-bg: #1b2638;
  --al-card-fg: #e8ecf3;
  --al-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --al-radius: 10px;
  --al-gap: 12px;

  /* configurable alert widths (ui/notifications.js: "1/4" | "1/3") */
  --al-width-quarter: 25vw;
  --al-width-third: 33vw;
  --al-width-min: 280px;
  --al-width-max: 480px;

  /* spacing scale */
  --al-space-xs: 4px;
  --al-space-sm: 8px;
  --al-space-md: 16px;
  --al-space-lg: 24px;

  /* motion: durations + easings. UI components animate via these tokens; the
     prefers-reduced-motion policy at the bottom of this file neutralises them centrally
     so no component repeats it. */
  --al-dur-fast: 120ms;
  --al-dur: 200ms;
  --al-dur-slow: 360ms;
  --al-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --al-ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* form controls (inputs, selects, toggles) */
  --al-control-bg: #121c2e;
  --al-control-fg: var(--al-fg);
  --al-control-border: #2a3852;
  --al-control-border-focus: var(--al-info);
  --al-control-radius: 8px;
  --al-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.35);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --al-bg: #f5f8fc;
    --al-fg: #1a2030;
    --al-card-bg: #ffffff;
    --al-card-fg: #1a2030;
    --al-card-shadow: 0 8px 24px rgba(20, 30, 60, 0.15);
    --al-control-bg: #ffffff;
    --al-control-border: #c7d2e0;
  }
}

/* Accessibility: honour the OS "reduce motion" setting globally. Component animations are
   built on the motion tokens above; neutralising transitions/animations here means no
   component needs to repeat the media query. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}