@layer base {
  /*
   * A.I.M. Frigate theme
   * Palette matched to the supplied A.I.M. Watchdesk/Control Room reference.
   *
   * Dark:
   *   page      #18191b
   *   panel     #242628
   *   raised    #2b2d30
   *   hover     #333638
   *   border    #3b3e41
   *   text      #f6f7f4
   *   muted     #b1b5b9
   *   lime      #9ac62f
   *   lime hover#afd84c
   *
   * This file (Frigate's) is the source. The config service and the evidence
   * package's story page carry verbatim copies, copied by hand after a change.
   * Frigate colors remain HSL channels. Namespaced --aim-* values below
   * describe elevation only; they do not replace/alias Frigate tokens.
   * Light mode is the corresponding A.I.M. neutral/lime palette.
   */

  .theme-aim-green.light {
    color-scheme: light;

    --aim-panel-radius: 8px;
    --aim-dialog-radius: 14px;
    --aim-panel-shadow: 0 1px 3px rgb(23 32 38 / .10);
    --aim-dialog-shadow: 0 24px 80px rgb(23 32 38 / .26), 0 6px 20px rgb(23 32 38 / .14);
    --aim-overlay: 220 10% 12%;
    --aim-overlay-opacity: .30;
    --aim-overlay-blur: 4px;

    --background: 210 10% 93%;
    --background-alt: 200 14.3% 95.9%;

    --foreground: 214.3 9.3% 14.7%;

    --card: 0 0% 100%;
    --card-foreground: 214.3 9.3% 14.7%;

    --popover: 0 0% 100%;
    --popover-foreground: 214.3 9.3% 14.7%;

    /* A.I.M. lime */
    --primary: 77.5 61.6% 48%;
    --primary-variant: 76.6 61.6% 55.1%;
    --primary-foreground: 80.8 68.4% 7.5%;

    /* Raised controls / subdued UI. Darker than the canvas, so controls,
     * chips and tracks show against it, not only against white panels. */
    --secondary: 200 15% 87%;
    --secondary-foreground: 210 5.9% 38%;
    --secondary-highlight: 200 14.3% 95.9%;

    --neutral: 210 5.9% 40%;
    --neutral_variant: 205.7 9.9% 86.1%;

    --muted: 200 15% 92.2%;
    --muted-foreground: 210 5.9% 40%;

    /* Hover / selected-neutral surface */
    --accent: 76.8 55.6% 91.2%;
    --accent-foreground: 80 82.3% 24.3%;

    --destructive: 4.8 61.6% 40.2%;
    --destructive-foreground: 0 0% 98%;

    /* Amber wash with dark text, like the accent pair: #f8e5bf / #744106, 6.75:1 */
    --warning: 39.7 80% 86%;
    --warning-foreground: 32 90% 24%;

    --border: 210 9% 77%;
    --input: 210 9% 77%;

    --ring: 77.5 61.6% 48%;

    --selected: 77.5 61.6% 48%;
    --selected-foreground: 80.8 68.4% 7.5%;

    --severity_alert: var(--red-800);
    --severity_alert_dimmed: var(--red-500);
    --severity_detection: var(--orange-600);
    --severity_detection_dimmed: var(--orange-400);
    --severity_significant_motion: var(--yellow-400);
    --severity_significant_motion_dimmed: var(--yellow-200);

    --motion_review: 44 94% 50%;
    --motion_review_dimmed: 44 60% 40%;
    --audio_review: 228 94% 67%;
  }

  .theme-aim-green.dark {
    color-scheme: dark;

    --aim-panel-radius: 8px;
    --aim-dialog-radius: 14px;
    --aim-panel-shadow: 0 1px 3px rgb(0 0 0 / .22);
    --aim-dialog-shadow: 0 24px 80px rgb(0 0 0 / .55), 0 6px 20px rgb(0 0 0 / .30);
    --aim-overlay: 220 10% 4%;
    --aim-overlay-opacity: .55;
    --aim-overlay-blur: 4px;

    /* Main canvas: #18191b */
    --background: 220 5.9% 10%;

    /* Slightly lifted page/navigation layer: #242628 */
    --background-alt: 210 5.3% 14.9%;

    /* Primary copy: #f6f7f4 */
    --foreground: 80 15.8% 96.3%;

    /* Cards/panels: #242628 */
    --card: 210 5.3% 14.9%;
    --card-foreground: 80 15.8% 96.3%;

    /* Control Room dialog: #242628. Inputs remain raised #2b2d30. */
    --popover: 210 5.3% 14.9%;
    --popover-foreground: 80 15.8% 96.3%;

    /* Primary A.I.M. action: #9ac62f */
    --primary: 77.5 61.6% 48%;

    /* Primary hover: #afd84c */
    --primary-variant: 77.6 64.2% 57.3%;

    /* Dark ink on lime buttons: #172006 */
    --primary-foreground: 80.8 68.4% 7.5%;

    /* Grey buttons / raised controls: #2b2d30 */
    --secondary: 216 5.5% 17.8%;
    --secondary-foreground: 80 15.8% 96.3%;

    /* Grey button hover: #333638 */
    --secondary-highlight: 204 4.7% 21%;

    --neutral: 210 5.4% 71%;
    --neutral_variant: 210 4.8% 24.3%;

    /* Muted/quiet surfaces */
    --muted: 216 5.5% 17.8%;
    --muted-foreground: 210 5.4% 71%;

    /* Hover/selection wash: #303a20 */
    --accent: 83.1 28.9% 17.6%;

    /* Lime-highlighted text: #b5db68 */
    --accent-foreground: 79.8 61.5% 63.3%;

    /* Alert colours retained but softened for the charcoal UI */
    --destructive: 2.8 22.6% 20.4%;
    --destructive-foreground: 3.5 76.7% 79.8%;

    --warning: 35.7 25.5% 17.8%;
    --warning-foreground: 39.3 79.6% 73.7%;

    /* Structural lines: #3b3e41 */
    --border: 210 4.8% 24.3%;

    /* Input/checkbox/control background */
    --input: 216 5.5% 17.8%;

    /* Focus ring: A.I.M. lime */
    --ring: 77.5 61.6% 48%;

    /* Checked/selected state */
    --selected: 77.5 61.6% 48%;
    --selected-foreground: 80.8 68.4% 7.5%;

    --severity_alert: var(--red-800);
    --severity_alert_dimmed: var(--red-500);
    --severity_detection: var(--orange-600);
    --severity_detection_dimmed: var(--orange-400);
    --severity_significant_motion: var(--yellow-400);
    --severity_significant_motion_dimmed: var(--yellow-200);

    --motion_review: 44 94% 50%;
    --motion_review_dimmed: 44 60% 40%;
    --audio_review: 228 94% 67%;
  }

  /*
   * Frigate uses semantic theme variables heavily, but these small
   * theme-scoped overrides reproduce the reference site's interaction
   * states more closely where browser/native controls are involved.
   */

  .theme-aim-green.dark input[type="checkbox"],
  .theme-aim-green.dark input[type="radio"],
  .theme-aim-green.light input[type="checkbox"],
  .theme-aim-green.light input[type="radio"] {
    accent-color: hsl(var(--primary));
  }

  .theme-aim-green.dark ::selection,
  .theme-aim-green.light ::selection {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
  }

  .theme-aim-green.dark :focus-visible,
  .theme-aim-green.light :focus-visible {
    outline-color: hsl(var(--ring));
  }
}

/* Explicit contrasting thumb when this palette is reused by Frigate/Radix.
 * Unlayered selectors intentionally outrank Tailwind's utility backgrounds.
 */
.theme-aim-green [role="switch"][data-state="checked"] {
  background-color: hsl(var(--selected));
  border-color: hsl(var(--selected));
}

.theme-aim-green [role="switch"][data-state="checked"]>span {
  background-color: hsl(var(--selected-foreground));
}

.theme-aim-green [role="switch"][data-state="unchecked"] {
  background-color: hsl(var(--secondary));
  border-color: hsl(var(--border));
}

.theme-aim-green [role="switch"][data-state="unchecked"]>span {
  background-color: hsl(var(--muted-foreground));
}

.theme-aim-green [role="switch"][data-state="checked"]:hover:not(:disabled) {
  background-color: hsl(var(--primary-variant));
  border-color: hsl(var(--primary-variant));
}

.theme-aim-green [role="switch"][data-state="unchecked"]:hover:not(:disabled) {
  background-color: hsl(var(--secondary-highlight));
}

.theme-aim-green [role="switch"]:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Frigate 0.18 Dialog, AlertDialog and Sheet contents use bg-background,
 * not bg-popover. Override only their surface, never position/size/animation.
 * Kept outside @layer so Tailwind utility backgrounds cannot flatten them.
 * Radix portals inherit the theme from <html>; no config-service CSS needed.
 */
.theme-aim-green :is([role="dialog"], [role="alertdialog"]) {
  background-color: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border-color: hsl(var(--border));
  box-shadow: var(--aim-dialog-shadow);
}

/* Match the actual shared overlay classes in Frigate 0.18. Do not target
 * all fixed elements, players, sheets' content, or generic data-state nodes.
 */
.theme-aim-green .fixed.inset-0.bg-background\/80.backdrop-blur-sm[data-state] {
  background-color: hsl(var(--aim-overlay) / var(--aim-overlay-opacity));
  -webkit-backdrop-filter: blur(var(--aim-overlay-blur));
  backdrop-filter: blur(var(--aim-overlay-blur));
}

/* Standard Frigate Card primitive; leave borderless/video surfaces alone. */
.theme-aim-green .bg-card.border {
  border-color: hsl(var(--border));
  box-shadow: var(--aim-panel-shadow);
}

/* Reduce the color accent on textfield placeholders */
.theme-aim-green input::placeholder,
.theme-aim-green textarea::placeholder {
  color: hsl(var(--muted-foreground) / 0.30);
  opacity: 1;
}

/* Camera selector: use the foreground paired with its selected background.
 * Target the children too: they explicitly override the button's text color.
 */
.theme-aim-green button[aria-label="Select a camera"],
.theme-aim-green button[aria-label="Select a camera"]>.text-background {
  color: hsl(var(--selected-foreground));
}