/* ==========================================================================
   Bar Baglio - MASTER THEME
   Only file where fonts, colours and theme values are defined.
   All other CSS files must use var(--bb-...) and never colour codes.
   All colour pairs checked for WCAG 2.2 AA (contrast >= 4.5:1).
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL Open Font License) ---------- */
@font-face
{
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/open-sans-latin-400-normal.woff2") format("woff2");
}

@font-face
{
	font-family: "Open Sans";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/open-sans-latin-400-italic.woff2") format("woff2");
}

@font-face
{
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/open-sans-latin-600-normal.woff2") format("woff2");
}

@font-face
{
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/open-sans-latin-700-normal.woff2") format("woff2");
}

@font-face
{
	font-family: "Prata";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/prata-latin-400-normal.woff2") format("woff2");
}

@font-face
{
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/playfair-display-latin-400-normal.woff2") format("woff2");
}

@font-face
{
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/playfair-display-latin-700-normal.woff2") format("woff2");
}

/* ---------- Theme variables ---------- */
:root
{
	/* Colours - text and backgrounds */
	--bb-color-text: #333333; /* on white: 12.6:1 (original design) */
	--bb-color-text-muted: #595959; /* on white: 7.0:1 */
	--bb-color-title: #000000; /* section titles (original design), on white: 21:1 */
	--bb-color-bg: #FFFFFF;
	--bb-color-bg-dark: #1A1A1A;
	--bb-color-bg-alt: #F5F5F5; /* slightly darker white behind the page sections: text #333333 11.6:1, accent text 4.9:1, muted text 6.4:1 */
	--bb-color-bg-soft: #FAF9FD; /* pale lilac section background: text #333333 12.2:1, accent text 5.1:1 */
	--bb-color-border-soft: #AFA9EC; /* decorative frames on the pale lilac background */
	--bb-color-text-on-dark: #FFFFFF; /* on #1A1A1A: 17.4:1 */

	--bb-color-backdrop: rgba(26, 26, 26, 0.85); /* = #1A1A1A at 85%: dark see-through background behind pop-ups */

	/* Colours - header and footer (original design) */
	--bb-color-header-bg: #FFFFFF;
	--bb-color-header-border: #DDDDDD; /* decorative line only */
	--bb-color-footer-bg: #444444; /* white text: 9.7:1, orange text: 4.9:1 */
	--bb-color-footer-social-bg: #555555; /* white icon: 7.5:1 */
	/* Colours - brand accent */
	--bb-color-accent: #FFA500; /* ONLY as background, or as text on dark: 8.8:1 */
	--bb-color-text-on-accent: #1A1A1A; /* on #FFA500: 8.8:1 */
	--bb-color-accent-text: #A85400; /* accent text on white: 5.3:1 */
	--bb-color-accent-text-hover: #7A3D00; /* darker on hover */
	/* Colours - UI and states */
	--bb-color-border: #767676; /* field borders on white: 4.5:1 */
	--bb-color-error: #B3261E; /* on white: 6.5:1 */
	--bb-color-disabled-bg: #E6E6E6; /* greyed-out button */
	--bb-color-disabled-text: #595959; /* on #E6E6E6: 5.3:1 */
	--bb-color-success: #1E6B30; /* on white: 6.6:1 */
	/* Focus outline */
	--bb-focus-color: #1A1A1A; /* on light sections */
	--bb-focus-color-on-dark: #FFA500; /* on dark sections */
	--bb-focus-width: 3px;
	--bb-focus-offset: 2px;
	/* Fonts */
	--bb-font-body: "Prata", Georgia, "Times New Roman", serif; /* original: body in Prata */
	--bb-font-heading: "Open Sans", Arial, Helvetica, sans-serif; /* original: headings in Open Sans */
	--bb-font-display: "Playfair Display", Georgia, "Times New Roman", serif; /* replaces Tangerine */
	--bb-font-size-base: 0.9375rem; /* 15px (original) */
	--bb-line-height-base: 1.6;
	/* Spacing */
	--bb-panel-max-width: 1500px; /* width of the section panels on large screens */
	--bb-radius-panel: 16px; /* rounded corners of the section panels */
	--bb-section-padding: 4rem;
	/* ---------- Bootstrap 5.3 overrides (use the values above) ---------- */
	--bs-body-font-family: var(--bb-font-body);
	--bs-body-font-size: var(--bb-font-size-base);
	--bs-body-line-height: var(--bb-line-height-base);
	--bs-body-color: var(--bb-color-text);
	--bs-body-bg: var(--bb-color-bg);
	--bs-secondary-color: var(--bb-color-text-muted);
	--bs-heading-color: var(--bb-color-text);
	--bs-border-color: var(--bb-color-border);
	--bs-link-color: var(--bb-color-accent-text);
	--bs-link-hover-color: var(--bb-color-accent-text-hover);
	/* Bootstrap links use these RGB versions: must match the hex values above */
	--bs-link-color-rgb: 168, 84, 0; /* = #A85400 */
	--bs-link-hover-color-rgb: 122, 61, 0; /* = #7A3D00 */
	/* RGB versions for links on dark sections: must match the hex values above */
	--bb-color-accent-rgb: 255, 165, 0; /* = #FFA500 */
	--bb-color-text-on-dark-rgb: 255, 255, 255; /* = #FFFFFF */
}

/* ---------- ALTCHA captcha widget: use the site colours ---------- */
altcha-widget
{
	color-scheme: light;
	--altcha-color-base: var(--bb-color-bg);
	--altcha-color-base-content: var(--bb-color-text);
	--altcha-color-neutral: var(--bb-color-border);
	--altcha-color-neutral-content: var(--bb-color-text-muted);
	--altcha-color-primary: var(--bb-color-accent-text);
	--altcha-color-primary-content: var(--bb-color-bg);
	--altcha-color-error: var(--bb-color-error);
	--altcha-color-error-content: var(--bb-color-bg);
	--altcha-color-success: var(--bb-color-success);
	--altcha-color-success-content: var(--bb-color-bg);
	--altcha-checkbox-border-color: var(--bb-color-border);
	--altcha-checkbox-outline-color: var(--bb-focus-color);
	--altcha-input-background-color: var(--bb-color-bg);
	--altcha-input-color: var(--bb-color-text);
	--altcha-spinner-color: var(--bb-color-accent-text);
	--altcha-popover-color: var(--bb-color-text);
}

/* ---------- Cookie consent component (Scripts/consent): colours ---------- */
.ps-banner,
.ps-embed
{
	--ps-bg: var(--bb-color-bg);
	--ps-text: var(--bb-color-text);
	--ps-border: var(--bb-color-border);
	--ps-accent: var(--bb-color-accent-text);
	--ps-on-accent: var(--bb-color-bg);
	--ps-focus: var(--bb-focus-color);
	--ps-placeholder-bg: var(--bb-color-bg-alt);
}