/* RocketApps theme for the Authelia login portal (nttl-rocket docs/huisstijl.md: violet and
   lime, Archivo for headings, IBM Plex Sans for text). Caddy serves this file in place of
   Authelia's own stylesheet; the import below loads that original first. Fonts: SIL OFL 1.1,
   from @fontsource 5.3.0, latin subset. */
@import url("?authelia=1");

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/theme/fonts/archivo-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/theme/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url("/theme/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }

:root, [data-theme], [data-theme=light], [data-theme=dark], [data-theme=grey], [data-theme=oled] {
  --ra-violet: #2E1F5E;
  --ra-licht: #F6F4FB;
  --ra-limoen: #C6F04E;
  --ra-iris: #6B4FE0;
  --ra-steen: #5F5B73;
  --ra-lijn: #E3DFEE;

  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --background: var(--ra-licht);
  --foreground: var(--ra-violet);
  --card: #FFFFFF;
  --card-foreground: var(--ra-violet);
  --popover: #FFFFFF;
  --popover-foreground: var(--ra-violet);
  --primary: var(--ra-limoen);
  --primary-foreground: var(--ra-violet);
  --secondary: var(--ra-iris);
  --secondary-foreground: #FFFFFF;
  --muted: var(--ra-licht);
  --muted-foreground: var(--ra-steen);
  --accent: var(--ra-licht);
  --accent-foreground: var(--ra-violet);
  --info: var(--ra-iris);
  --info-foreground: #FFFFFF;
  --border: var(--ra-lijn);
  --input: var(--ra-lijn);
  --ring: var(--ra-iris);
  --radius: 0.75rem;
  --custom-icon: var(--ra-violet);
  --custom-loading-bar: var(--ra-iris);
  color-scheme: light;
}

body { font-family: var(--font-sans); background: var(--ra-licht); color: var(--ra-violet); }
h1, h2, h3, h4, h5, h6 {
  font-family: "Archivo", var(--font-sans); font-weight: 800; letter-spacing: -0.02em; color: var(--ra-violet);
}

/* Violet band at the top, the form on a white card that overlaps it. */
body {
  background:
    linear-gradient(var(--ra-violet), var(--ra-violet)) top / 100% 38vh no-repeat,
    var(--ra-licht);
}
header, header button { color: var(--ra-licht); }
header button:hover { background: rgb(246 244 251 / 0.12); }

/* Every Authelia step (first factor, second factor, consent) is a *-stage container. */
[id$="-stage"] > div {
  background: var(--card);
  border: 1px solid var(--ra-lijn);
  border-top: 6px solid var(--ra-limoen);
  border-radius: 20px;
  box-shadow: 0 24px 48px -24px rgb(46 31 94 / 0.35);
  padding: 32px 32px 24px;
  margin-inline: 16px;
  width: calc(100% - 32px);
}
img[alt="Logo"] { width: 5rem; }
[id$="-stage"] h5 { font-family: "Archivo", var(--font-sans); font-weight: 800; letter-spacing: -0.02em; }
input { background: #FFFFFF; }
button[type="submit"], #sign-in-button { font-weight: 600; letter-spacing: 0.02em; }
/* Lime is never a text colour (huisstijl): primary text and links become iris. */
.text-primary { color: var(--ra-iris); }