/*
  Control Center charter for the Authelia sign-in page.
  nginx links this file into Authelia's page (snippet signin-theme.conf); Authelia itself is not
  changed. Remove that one include to get the stock page back.

  It works by redefining Authelia's own colour, radius and font variables, plus a few touches:
  the background washes, the duck instead of the user icon, the title font, the main button.
*/
@import url("fonts.css");

:root, :root[data-theme], [data-theme="dark"], [data-theme="light"] {
  color-scheme: dark;
  /* Authelia's light/dark switches inside its compiled styles: always the dark branch. */
  --lightningcss-light: ;
  --lightningcss-dark: initial;

  --background: #0C0809;
  --foreground: #F7F1F2;
  --card: #1A1517;
  --card-foreground: #F7F1F2;
  --popover: #241D20;
  --popover-foreground: #F7F1F2;
  --primary: #D13A40;
  --primary-foreground: #FFFFFF;
  --secondary: #A81E45;
  --secondary-foreground: #FFFFFF;
  --muted: #241D20;
  --muted-foreground: #EBDADD;
  --accent: #241D20;
  --accent-foreground: #F7F1F2;
  --destructive: #FF8F93;
  --destructive-foreground: #0C0809;
  --success: #7BE08A;
  --success-foreground: #0C0809;
  --warning: #F0C05A;
  --warning-foreground: #0C0809;
  --info: #C3A6FF;
  --info-foreground: #0C0809;
  --border: rgba(255, 255, 255, 0.16);
  --input: rgba(255, 255, 255, 0.6);
  --ring: #F7F1F2;
  --radius: 12px;
  --custom-icon: #F7F1F2;
  --custom-loading-bar: #D13A40;
  --divider: rgba(255, 255, 255, 0.16);
  --font-sans: "B612", Verdana, system-ui, sans-serif;
  --font-mono: "B612 Mono", "DejaVu Sans Mono", Menlo, monospace;

  --cc-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --cc-link: #FFC2C5;
  --cc-glass: rgba(14, 8, 10, 0.55);
}

/* The charter's ground: near-black with bordeaux, red and violet washes. */
html {
  min-height: 100%;
  background-color: #0C0809 !important;
  background-attachment: fixed !important;
  background-image:
    radial-gradient(ellipse 55% 75% at 22% 112%, rgba(216, 50, 60, 0.4) 0%, rgba(216, 50, 60, 0.27) 32%, rgba(216, 50, 60, 0.08) 64%, transparent 100%),
    radial-gradient(ellipse 120% 150% at 32% 118%, rgba(122, 23, 48, 0.92) 0%, rgba(122, 23, 48, 0.63) 32%, rgba(122, 23, 48, 0.19) 64%, transparent 100%),
    radial-gradient(ellipse 100% 140% at 96% -18%, rgba(91, 63, 184, 0.46) 0%, rgba(91, 63, 184, 0.31) 32%, rgba(91, 63, 184, 0.1) 64%, transparent 100%) !important;
}
body {
  min-height: 100vh;
  background: transparent !important;
  color: #F7F1F2;
  font-family: var(--font-sans) !important;
}
#root, #root > div { background: transparent !important; }
#root input, #root button, #root select, #root textarea { font-family: inherit; }

/* Each step (sign in, second factor, reset, signed in) sits on a glass card. */
div[id$="-stage"] > div {
  box-sizing: border-box;
  max-width: 460px !important;
  padding: 32px 32px 24px !important;
  background: var(--cc-glass);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
@media (max-width: 520px) {
  div[id$="-stage"] > div { max-width: none !important; margin: 0 16px; padding: 24px 20px 20px !important; }
}

/* The duck instead of the generic user icon. */
#UserSvg { display: none !important; }
div:has(> #UserSvg)::before {
  content: "";
  display: block;
  width: 92px;
  height: 82px;
  margin: 4px auto 8px;
  background: url("duck.svg") center / contain no-repeat;
}

/* Titles in the display face. */
#root h1, #root h2, #root h3, #root h4, #root h5, #root h6 {
  font-family: var(--cc-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
#root h5.text-2xl, #root h5 { font-size: 2rem !important; }

/* Fields: a raised surface, the charter radius, a clear focus. */
#root input:not([type="checkbox"]):not([type="radio"]) {
  background-color: #241D20 !important;
  border-radius: 12px !important;
  color: #F7F1F2;
}
#root input:not([type="checkbox"]):focus { border-color: #F7F1F2 !important; box-shadow: 0 0 0 2px rgba(247, 241, 242, 0.35) !important; }
#root label { color: #EBDADD; }

/* The main buttons: the charter's red gradient, sentence case. */
#root button.bg-primary, #root a.bg-primary {
  min-height: 48px;
  border: 0;
  border-radius: 12px !important;
  background: linear-gradient(90deg, #D13A40, #A81E45) !important;
  color: #FFFFFF !important;
  font-family: var(--font-sans);
  font-weight: 700 !important;
  font-size: 15px !important;
  text-transform: none !important;
  letter-spacing: 0;
  transition: transform 200ms ease, filter 200ms ease;
}
#root button.bg-primary:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.12); }
#root button:focus-visible, #root a:focus-visible, #root input:focus-visible { outline: 2px solid #F7F1F2 !important; outline-offset: 2px; }

/* Links and quiet text buttons in the charter's pink. */
#root .text-primary, #root a.text-primary { color: var(--cc-link) !important; }
#root a[href*="authelia.com"] { color: rgba(235, 218, 221, 0.6) !important; }

@media (prefers-reduced-motion: reduce) {
  #root button.bg-primary { transition: none; }
  #root button.bg-primary:hover { transform: none; }
}