/* Authelia portal in the style of https://itellekt.ru ("engineering
   documentation": thin rules instead of shadows, square corners).
   Authelia 4.39 draws its UI with Tailwind and themes it through CSS
   variables of [data-theme=light] (theme: light in configuration.yml), so the
   palette is set here by overriding them; the few rules below patch what the
   variables do not reach. Fonts: Onest (OFL), self-hosted on the site, copied
   to fonts/. nginx adds this file to every HTML page of the portal
   (roles/authelia, nginx.conf.j2). */

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/Onest-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/Onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --it-green: #219653;
  --it-green-dark: #1b7d45;
  --it-graphite: #1e293b;
  --it-blue: #2563eb;
  --it-line: #e2e8f0;
  --it-line-strong: #cbd5e1;
}

body[data-theme] {
  --background: #f8fafc;
  --foreground: #334155;
  --card: #fff;
  --card-foreground: #334155;
  --popover: #fff;
  --popover-foreground: #334155;
  --primary: var(--it-green);
  --primary-foreground: #fff;
  --muted: #f1f5f9;
  --muted-foreground: #64748b;
  --accent: #eaf6ef;
  --accent-foreground: var(--it-graphite);
  --destructive: #ef4444;
  --success: var(--it-green);
  --info: var(--it-blue);
  --border: var(--it-line);
  --input: var(--it-line-strong);
  --ring: var(--it-green);
  --radius: 2px;
  --custom-icon: var(--it-graphite);
  --custom-loading-bar: var(--it-green);
  --divider: var(--it-line);
  font-family: 'Onest', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body[data-theme] button,
body[data-theme] input,
body[data-theme] select,
body[data-theme] textarea {
  font-family: inherit;
}

/* Login card: white, 1px rule, no shadow. */
body[data-theme] .max-w-\[444px\] {
  background: var(--card);
  border: 1px solid var(--it-line);
  border-radius: 2px;
  padding: 32px 36px 24px;
  margin-top: 4vh;
}

/* Headings: graphite, bold, tight. */
body[data-theme] h1,
body[data-theme] h2,
body[data-theme] h3,
body[data-theme] h4,
body[data-theme] h5,
body[data-theme] h6 {
  color: var(--it-graphite);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Links. */
body[data-theme] a {
  color: var(--it-blue);
  text-decoration: none;
}
body[data-theme] a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Square corners and no shadows on the controls. */
body[data-theme] input,
body[data-theme] button,
body[data-theme] [role='checkbox'],
body[data-theme] [role='dialog'],
body[data-theme] [role='menu'] {
  border-radius: 2px;
  box-shadow: none;
}
body[data-theme] input:focus {
  border-color: var(--it-green);
  box-shadow: 0 0 0 1px var(--it-green);
}

/* Buttons: green primary. */
body[data-theme] button[type='submit'],
body[data-theme] button.bg-primary {
  font-weight: 600;
  text-transform: none;
}
body[data-theme] button.bg-primary:hover {
  background: var(--it-green-dark);
}

::selection {
  background: var(--it-blue);
  color: #fff;
}

/* No logo (neither a custom one nor the default Authelia mark) and no
   "Powered by Authelia" link under the form. */
body[data-theme] img[alt='Logo'],
body[data-theme] svg.mx-auto.my-2.w-16,
body[data-theme] a[href*='authelia.com'] {
  display: none !important;
}