/*
 * SPDX-FileCopyrightText: 2026 Authelia
 *
 * SPDX-License-Identifier: Apache-2.0
 */

/*
 * The theme of the portal.
 *
 * Everything that gives the portal its look is a custom property in this file; app.css only uses them. To change the
 * look of the portal without touching the files that come with Authelia, put the properties you want to change, or any
 * other CSS, in a custom.css in the directory of the `server.asset_path` option: it is loaded after these files. If you
 * would rather replace all of the theme, a theme.css in that directory is served instead of this file.
 *
 * The colours are pairs for light-dark(): the first applies to a light colour scheme, the second to a dark one. The
 * `theme` option of Authelia picks the scheme: `light` and `dark` force it, `auto` follows the browser (`grey` and
 * `oled` are treated as `dark`).
 */

:root {
	color-scheme: light dark;

	/* Typography. */
	--font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	--font-size: 1rem;
	--line-height: 1.5;

	/* Surfaces and text. */
	--color-background: light-dark(#ffffff, #202124);
	--color-foreground: light-dark(#1f1f1f, #f5f5f5);
	--color-surface: light-dark(#ffffff, #2b2c30);
	--color-surface-muted: light-dark(#f5f5f5, #35363b);
	--color-muted: light-dark(#616161, #b3b3b3);
	--color-border: light-dark(#e0e0e0, #484a50);
	--color-overlay: rgb(0 0 0 / 0.5);

	/* Actions and states. */
	--color-primary: light-dark(#1f6bcc, #3b82e0);
	--color-primary-contrast: #ffffff;
	--color-secondary: #e62e5c;
	--color-danger: light-dark(#c62828, #ef5350);
	--color-success: light-dark(#2e7d32, #66bb6a);
	--color-warning: light-dark(#b26a00, #ffb74d);
	--color-info: light-dark(#1565c0, #64b5f6);
	--color-focus: var(--color-primary);

	/* The logo, the loading animation and the pictograms. */
	--color-logo: light-dark(#000000, #ffffff);
	--color-loading: light-dark(#000000, #ffffff);
	--color-pictogram: light-dark(#000000, #ffffff);

	/* The password strength meter from the weakest to the strongest. */
	--meter-0: #d32f2f;
	--meter-1: #ff5722;
	--meter-2: #ffeb3b;
	--meter-3: #afb42b;
	--meter-4: #62d32f;

	/* Buttons are written in capitals; use `none` to leave the text as it is. */
	--button-text-transform: uppercase;

	/* Shape and layout. */
	--radius: 0.5rem;
	--radius-small: 0.25rem;
	--shadow: 0 4px 16px rgb(0 0 0 / 0.18);
	--width-xs: 444px;
	--width-sm: 36rem;
	--width-md: 42rem;
	--width-lg: 56rem;
	--logo-size: 4rem;
	--logo-image: url("../media/user.svg");
}

:root[data-theme="light"] {
	color-scheme: light;
}

:root[data-theme="dark"],
:root[data-theme="grey"],
:root[data-theme="oled"] {
	color-scheme: dark;
}