/* Generated by rootiest-icons scripts/make-themes.py from themes/immich.css and themes/palette.toml: do not edit. */
:root {
  --immich-ui-primary-50: color-mix(in srgb, #dd7878 12%, #eff1f5);
  --immich-ui-primary-100: color-mix(in srgb, #dd7878 25%, #eff1f5);
  --immich-ui-primary-200: color-mix(in srgb, #dd7878 45%, #eff1f5);
  --immich-ui-primary-300: color-mix(in srgb, #dd7878 65%, #eff1f5);
  --immich-ui-primary-400: color-mix(in srgb, #dd7878 85%, #eff1f5);
  --immich-ui-primary-500: #dd7878;
  --immich-ui-primary-600: color-mix(in srgb, #dd7878 85%, #4c4f69);
  --immich-ui-primary-700: color-mix(in srgb, #dd7878 70%, #4c4f69);
  --immich-ui-primary-800: color-mix(in srgb, #dd7878 55%, #4c4f69);
  --immich-ui-primary-900: color-mix(in srgb, #dd7878 40%, #4c4f69);
  --immich-ui-primary-950: color-mix(in srgb, #dd7878 25%, #4c4f69);
  --immich-ui-primary: #dd7878;
  --immich-ui-success-50: color-mix(in srgb, #40a02b 12%, #eff1f5);
  --immich-ui-success-100: color-mix(in srgb, #40a02b 25%, #eff1f5);
  --immich-ui-success-200: color-mix(in srgb, #40a02b 45%, #eff1f5);
  --immich-ui-success-300: color-mix(in srgb, #40a02b 65%, #eff1f5);
  --immich-ui-success-400: color-mix(in srgb, #40a02b 85%, #eff1f5);
  --immich-ui-success-500: #40a02b;
  --immich-ui-success-600: color-mix(in srgb, #40a02b 85%, #4c4f69);
  --immich-ui-success-700: color-mix(in srgb, #40a02b 70%, #4c4f69);
  --immich-ui-success-800: color-mix(in srgb, #40a02b 55%, #4c4f69);
  --immich-ui-success-900: color-mix(in srgb, #40a02b 40%, #4c4f69);
  --immich-ui-success-950: color-mix(in srgb, #40a02b 25%, #4c4f69);
  --immich-ui-success: #40a02b;
  --immich-ui-danger-50: color-mix(in srgb, #d20f39 12%, #eff1f5);
  --immich-ui-danger-100: color-mix(in srgb, #d20f39 25%, #eff1f5);
  --immich-ui-danger-200: color-mix(in srgb, #d20f39 45%, #eff1f5);
  --immich-ui-danger-300: color-mix(in srgb, #d20f39 65%, #eff1f5);
  --immich-ui-danger-400: color-mix(in srgb, #d20f39 85%, #eff1f5);
  --immich-ui-danger-500: #d20f39;
  --immich-ui-danger-600: color-mix(in srgb, #d20f39 85%, #4c4f69);
  --immich-ui-danger-700: color-mix(in srgb, #d20f39 70%, #4c4f69);
  --immich-ui-danger-800: color-mix(in srgb, #d20f39 55%, #4c4f69);
  --immich-ui-danger-900: color-mix(in srgb, #d20f39 40%, #4c4f69);
  --immich-ui-danger-950: color-mix(in srgb, #d20f39 25%, #4c4f69);
  --immich-ui-danger: #d20f39;
  --immich-ui-warning-50: color-mix(in srgb, #df8e1d 12%, #eff1f5);
  --immich-ui-warning-100: color-mix(in srgb, #df8e1d 25%, #eff1f5);
  --immich-ui-warning-200: color-mix(in srgb, #df8e1d 45%, #eff1f5);
  --immich-ui-warning-300: color-mix(in srgb, #df8e1d 65%, #eff1f5);
  --immich-ui-warning-400: color-mix(in srgb, #df8e1d 85%, #eff1f5);
  --immich-ui-warning-500: #df8e1d;
  --immich-ui-warning-600: color-mix(in srgb, #df8e1d 85%, #4c4f69);
  --immich-ui-warning-700: color-mix(in srgb, #df8e1d 70%, #4c4f69);
  --immich-ui-warning-800: color-mix(in srgb, #df8e1d 55%, #4c4f69);
  --immich-ui-warning-900: color-mix(in srgb, #df8e1d 40%, #4c4f69);
  --immich-ui-warning-950: color-mix(in srgb, #df8e1d 25%, #4c4f69);
  --immich-ui-warning: #df8e1d;
  --immich-ui-info-50: color-mix(in srgb, #1e66f5 12%, #eff1f5);
  --immich-ui-info-100: color-mix(in srgb, #1e66f5 25%, #eff1f5);
  --immich-ui-info-200: color-mix(in srgb, #1e66f5 45%, #eff1f5);
  --immich-ui-info-300: color-mix(in srgb, #1e66f5 65%, #eff1f5);
  --immich-ui-info-400: color-mix(in srgb, #1e66f5 85%, #eff1f5);
  --immich-ui-info-500: #1e66f5;
  --immich-ui-info-600: color-mix(in srgb, #1e66f5 85%, #4c4f69);
  --immich-ui-info-700: color-mix(in srgb, #1e66f5 70%, #4c4f69);
  --immich-ui-info-800: color-mix(in srgb, #1e66f5 55%, #4c4f69);
  --immich-ui-info-900: color-mix(in srgb, #1e66f5 40%, #4c4f69);
  --immich-ui-info-950: color-mix(in srgb, #1e66f5 25%, #4c4f69);
  --immich-ui-info: #1e66f5;
  --immich-ui-gray: #e6e9ef;
  --immich-ui-muted: #6c6f85;
  --immich-ui-default-border: #ccd0da;
  --immich-ui-light-50: #eff1f5;
  --immich-ui-light-100: #e6e9ef;
  --immich-ui-light-200: #dce0e8;
  --immich-ui-light-300: #ccd0da;
  --immich-ui-light-400: #bcc0cc;
  --immich-ui-light-500: #acb0be;
  --immich-ui-light-600: #9ca0b0;
  --immich-ui-light-700: #8c8fa1;
  --immich-ui-light-800: #7c7f93;
  --immich-ui-light-900: #6c6f85;
  --immich-ui-light-950: #4c4f69;
  --immich-ui-dark-50: #4c4f69;
  --immich-ui-dark-100: #6c6f85;
  --immich-ui-dark-200: #7c7f93;
  --immich-ui-dark-300: #8c8fa1;
  --immich-ui-dark-400: #9ca0b0;
  --immich-ui-dark-500: #acb0be;
  --immich-ui-dark-600: #bcc0cc;
  --immich-ui-dark-700: #ccd0da;
  --immich-ui-dark-800: #dce0e8;
  --immich-ui-dark-900: #e6e9ef;
  --immich-ui-dark-950: #eff1f5;
  --immich-ui-light: #eff1f5;
  --immich-ui-dark: #4c4f69;
  --immich-primary: 155 84 84;
  --immich-bg: 239 241 245;
  --immich-fg: 76 79 105;
}
.dark {
  --immich-ui-primary-50: color-mix(in srgb, #a6e3a1 12%, #1e1e2e);
  --immich-ui-primary-100: color-mix(in srgb, #a6e3a1 25%, #1e1e2e);
  --immich-ui-primary-200: color-mix(in srgb, #a6e3a1 45%, #1e1e2e);
  --immich-ui-primary-300: color-mix(in srgb, #a6e3a1 65%, #1e1e2e);
  --immich-ui-primary-400: color-mix(in srgb, #a6e3a1 85%, #1e1e2e);
  --immich-ui-primary-500: #a6e3a1;
  --immich-ui-primary-600: color-mix(in srgb, #a6e3a1 85%, #cdd6f4);
  --immich-ui-primary-700: color-mix(in srgb, #a6e3a1 70%, #cdd6f4);
  --immich-ui-primary-800: color-mix(in srgb, #a6e3a1 55%, #cdd6f4);
  --immich-ui-primary-900: color-mix(in srgb, #a6e3a1 40%, #cdd6f4);
  --immich-ui-primary-950: color-mix(in srgb, #a6e3a1 25%, #cdd6f4);
  --immich-ui-primary: #a6e3a1;
  --immich-ui-success-50: color-mix(in srgb, #a6e3a1 12%, #1e1e2e);
  --immich-ui-success-100: color-mix(in srgb, #a6e3a1 25%, #1e1e2e);
  --immich-ui-success-200: color-mix(in srgb, #a6e3a1 45%, #1e1e2e);
  --immich-ui-success-300: color-mix(in srgb, #a6e3a1 65%, #1e1e2e);
  --immich-ui-success-400: color-mix(in srgb, #a6e3a1 85%, #1e1e2e);
  --immich-ui-success-500: #a6e3a1;
  --immich-ui-success-600: color-mix(in srgb, #a6e3a1 85%, #cdd6f4);
  --immich-ui-success-700: color-mix(in srgb, #a6e3a1 70%, #cdd6f4);
  --immich-ui-success-800: color-mix(in srgb, #a6e3a1 55%, #cdd6f4);
  --immich-ui-success-900: color-mix(in srgb, #a6e3a1 40%, #cdd6f4);
  --immich-ui-success-950: color-mix(in srgb, #a6e3a1 25%, #cdd6f4);
  --immich-ui-success: #a6e3a1;
  --immich-ui-danger-50: color-mix(in srgb, #f38ba8 12%, #1e1e2e);
  --immich-ui-danger-100: color-mix(in srgb, #f38ba8 25%, #1e1e2e);
  --immich-ui-danger-200: color-mix(in srgb, #f38ba8 45%, #1e1e2e);
  --immich-ui-danger-300: color-mix(in srgb, #f38ba8 65%, #1e1e2e);
  --immich-ui-danger-400: color-mix(in srgb, #f38ba8 85%, #1e1e2e);
  --immich-ui-danger-500: #f38ba8;
  --immich-ui-danger-600: color-mix(in srgb, #f38ba8 85%, #cdd6f4);
  --immich-ui-danger-700: color-mix(in srgb, #f38ba8 70%, #cdd6f4);
  --immich-ui-danger-800: color-mix(in srgb, #f38ba8 55%, #cdd6f4);
  --immich-ui-danger-900: color-mix(in srgb, #f38ba8 40%, #cdd6f4);
  --immich-ui-danger-950: color-mix(in srgb, #f38ba8 25%, #cdd6f4);
  --immich-ui-danger: #f38ba8;
  --immich-ui-warning-50: color-mix(in srgb, #f9e2af 12%, #1e1e2e);
  --immich-ui-warning-100: color-mix(in srgb, #f9e2af 25%, #1e1e2e);
  --immich-ui-warning-200: color-mix(in srgb, #f9e2af 45%, #1e1e2e);
  --immich-ui-warning-300: color-mix(in srgb, #f9e2af 65%, #1e1e2e);
  --immich-ui-warning-400: color-mix(in srgb, #f9e2af 85%, #1e1e2e);
  --immich-ui-warning-500: #f9e2af;
  --immich-ui-warning-600: color-mix(in srgb, #f9e2af 85%, #cdd6f4);
  --immich-ui-warning-700: color-mix(in srgb, #f9e2af 70%, #cdd6f4);
  --immich-ui-warning-800: color-mix(in srgb, #f9e2af 55%, #cdd6f4);
  --immich-ui-warning-900: color-mix(in srgb, #f9e2af 40%, #cdd6f4);
  --immich-ui-warning-950: color-mix(in srgb, #f9e2af 25%, #cdd6f4);
  --immich-ui-warning: #f9e2af;
  --immich-ui-info-50: color-mix(in srgb, #89b4fa 12%, #1e1e2e);
  --immich-ui-info-100: color-mix(in srgb, #89b4fa 25%, #1e1e2e);
  --immich-ui-info-200: color-mix(in srgb, #89b4fa 45%, #1e1e2e);
  --immich-ui-info-300: color-mix(in srgb, #89b4fa 65%, #1e1e2e);
  --immich-ui-info-400: color-mix(in srgb, #89b4fa 85%, #1e1e2e);
  --immich-ui-info-500: #89b4fa;
  --immich-ui-info-600: color-mix(in srgb, #89b4fa 85%, #cdd6f4);
  --immich-ui-info-700: color-mix(in srgb, #89b4fa 70%, #cdd6f4);
  --immich-ui-info-800: color-mix(in srgb, #89b4fa 55%, #cdd6f4);
  --immich-ui-info-900: color-mix(in srgb, #89b4fa 40%, #cdd6f4);
  --immich-ui-info-950: color-mix(in srgb, #89b4fa 25%, #cdd6f4);
  --immich-ui-info: #89b4fa;
  --immich-ui-gray: #181825;
  --immich-ui-muted: #a6adc8;
  --immich-ui-default-border: #313244;
  --immich-ui-light-50: #11111b;
  --immich-ui-light-100: #181825;
  --immich-ui-light-200: #1e1e2e;
  --immich-ui-light-300: #313244;
  --immich-ui-light-400: #45475a;
  --immich-ui-light-500: #585b70;
  --immich-ui-light-600: #6c7086;
  --immich-ui-light-700: #7f849c;
  --immich-ui-light-800: #9399b2;
  --immich-ui-light-900: #a6adc8;
  --immich-ui-light-950: #cdd6f4;
  --immich-ui-dark-50: #cdd6f4;
  --immich-ui-dark-100: #a6adc8;
  --immich-ui-dark-200: #9399b2;
  --immich-ui-dark-300: #7f849c;
  --immich-ui-dark-400: #6c7086;
  --immich-ui-dark-500: #585b70;
  --immich-ui-dark-600: #45475a;
  --immich-ui-dark-700: #313244;
  --immich-ui-dark-800: #1e1e2e;
  --immich-ui-dark-900: #181825;
  --immich-ui-dark-950: #11111b;
  --immich-ui-light: #11111b;
  --immich-ui-dark: #cdd6f4;
  --immich-dark-primary: 166 227 161;
  --immich-dark-bg: 30 30 46;
  --immich-dark-fg: 205 214 244;
  --immich-dark-gray: 49 50 68;
}

/* Immich (photos.rootiest.com and .dev), linked into its pages by the edges' Caddy (import theme immich). Its color scales
   (--immich-ui-<color>-50 ... -950) are built from the palette color with color-mix(): toward the page background below 500
   and toward the text above it, which suits both modes. The light-* scale runs from the background to the text and dark-* the
   other way, in either mode, so they are per mode. The older --immich-* "R G B" variables are set too. Dark by default. */

/* The header logo is Immich's "immich" wordmark, an <img> of /_app/immutable/assets/immich-logo-inline-{dark,light}.<hash>.svg
   drawn by the app, so Caddy cannot rewrite it. Hide it and show the Rootiest Photos icon and name instead, as the RootiestID
   theme does for its header. Matched by the file name, not the alt text (which Immich may translate). The icon is
   rootiest-photos-header, the Immich logo in its own colors on a neutral swirl (docs/icon-style.md), stacked from its two
   halves so the swirl takes the header's text color and follows Immich's own light/dark toggle: the swirl is a mask over
   currentColor (::before) and the petals are the link's background, in the same square, under it (they do not overlap:
   the swirl is knocked out around them). Both halves are served beside this stylesheet (img/, written by
   make-emblem-icons.py): a mask image is fetched with CORS, which pages.rootiest.fyi does not send. The name is in Fira
   Sans SemiBold, also served beside this stylesheet (fonts/, see pocket-id.css), in the header's text color too. */
@font-face {
  font-family: "Rootiest Fira Sans";
  src: url("fonts/fira-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
a:has(> img[src*="immich-logo-inline"]) {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 3rem;
  background: url("img/rootiest-photos-header-emblem.svg") left center / 2.5rem 2.5rem no-repeat content-box;
}
a > img[src*="immich-logo-inline"] {
  display: none;
}
a:has(> img[src*="immich-logo-inline"])::before {
  content: "";
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  background-color: currentColor;
  -webkit-mask: url("img/rootiest-photos-header-swirl.svg") center / contain no-repeat;
  mask: url("img/rootiest-photos-header-swirl.svg") center / contain no-repeat;
}
a:has(> img[src*="immich-logo-inline"])::after {
  content: "Rootiest Photos";
  font-family: "Rootiest Fira Sans", "Fira Sans", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 2rem;
  white-space: nowrap;
}
@media (max-width: 767px) {
  a:has(> img[src*="immich-logo-inline"])::after {
    font-size: 1.2rem;
  }
}