/*
 * Luznar design tokens for client features.
 * Mirrors scss/base/variables.scss (the core theme only has SCSS variables, no CSS custom properties).
 * If a value changes in variables.scss, update it here too.
 *
 * Breakpoints cannot be CSS variables inside media queries — use these literal values (min-width):
 *   desktop 1360px · small-desktop 1200px · tablet 992px · small-tablet 768px · mobile 576px · small-mobile 321px
 */

:root {
	/* Typography */
	--luznar-font-sans: 'Montserrat', Helvetica, Arial, sans-serif;
	--luznar-font-serif: 'Space Grotesk', 'Montserrat', Helvetica, Arial, sans-serif;
	--luznar-font-inter: 'Inter', 'Montserrat', Helvetica, Arial, sans-serif;

	--luznar-font-size-normal: 16px;
	--luznar-font-size-medium: 15px;
	--luznar-font-size-smaller: 14px;
	--luznar-font-size-small: 12px;
	--luznar-font-size-tiny: 11px;

	/* Brand colors */
	--luznar-blue-royal: #15254f;
	--luznar-blue-elegant: #135b9e;
	--luznar-blue-electric: #01c5fc;
	--luznar-gold: #dcc160;
	--luznar-dark-gold: #7c5723;
	--luznar-green: #60dcbf;
	--luznar-white: #ffffff;
	--luznar-black: #000000;

	/* Text */
	--luznar-text-primary: #01c5fc;
	--luznar-text-dark: #666666;
	--luznar-text-medium: #888888;
	--luznar-text-light: #aaaaaa;

	/* Backgrounds */
	--luznar-bg-dark: #aaaaaa;
	--luznar-bg-medium: #eeeeee;
	--luznar-bg-light: #fbf6f6;
	--luznar-backdrop: rgba(0, 0, 0, 0.45);

	/* Status */
	--luznar-success: #5d9c59;
	--luznar-success-bg: #e2ebdf;
	--luznar-error: #df2e38;
	--luznar-error-bg: #f4dad8;
	--luznar-notice: #faad00;
	--luznar-notice-bg: #d9e6e8;

	/* Borders & spacing */
	--luznar-border: #cccccc;
	--luznar-spacer: 10px;

	/* Site header */
	--luznar-header-height: 100px;
	--luznar-header-height-mobile: 60px;
}