/**
 * Wells Cathedral Staff Portal — Brand tokens & colour themes
 * Source: Wells Cathedral brand refresh (draft, Oct 2026).
 *
 * Loaded on the front end AND the login page. To add or change a theme,
 * edit the blocks at the bottom only: dark = primary, mid = accent,
 * light = tints/borders (the three shades of each colour in the brand palette).
 * ========================================================================== */

/* Body / UI font */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');

/* Romana — headlines (Bold only, per brand typography) */
@font-face {
	font-family: 'Romana';
	src: url('../fonts/OPTIRomanaRoman-Normal.otf') format('opentype');
	font-weight: 400;
	font-style:  normal;
	font-display: swap;
}

@font-face {
	font-family: 'Romana';
	src: url('../fonts/OPTIRomanaRoman-Bold.otf') format('opentype');
	font-weight: 700;
	font-style:  normal;
	font-display: swap;
}

/* --------------------------------------------------------------------------
   Theme-independent tokens
   -------------------------------------------------------------------------- */
:root {
	--font-display: 'Romana', 'Georgia', serif;
	--font-body:    'Google Sans', 'Helvetica Neue', Arial, sans-serif;

	--color-text:           #1a1a1a;
	--color-text-body:      #444444;
	--color-text-muted:     #606060;
	--color-text-faint:     #8a8a8a;
	--color-bg-card:        #ffffff;

	--color-alert-red:      #c0392b;
	--color-alert-red-bg:   #fde8e8;
	--color-alert-green:    #2e7d32;
	--color-alert-green-bg: #e8f5e9;
	--color-alert-blue:     #2980b9;
	--color-alert-blue-bg:  #e3f0fb;

	--text-xs:   0.6875rem;
	--text-sm:   0.8125rem;
	--text-base: 0.9375rem;
	--text-md:   1rem;
	--text-lg:   1.125rem;
	--text-xl:   1.375rem;
	--text-2xl:  1.5rem;
	--text-3xl:  1.875rem;

	--radius-sm:  4px;
	--radius-md:  6px;
	--radius-lg:  10px;
	--radius-xl:  16px;

	--shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}

/* --------------------------------------------------------------------------
   Colour themes — Blue is the default (no attribute needed)
   Switched by <html data-wi-theme="...">, remembered in the browser.
   -------------------------------------------------------------------------- */
:root {
	--color-on-accent:       #001389;
	--logo-filter:          none;
	--color-primary:        #001389;
	--color-primary-dark:   #000E63;
	--color-accent:         #00ABFF;
	--color-accent-light:   #99DDFF;
	--color-tint:           #E2F5FF;
	--color-primary-light:  #E2F5FF;
	--color-bg-page:        #F3FBFF;
	--color-border:         #C7ECFF;
	--color-border-light:   #E2F5FF;
	--color-border-strong:  #A8E2FF;
	--color-primary-subtle: color-mix(in srgb, var(--color-accent) 35%, transparent);
}

/* Blue */
:root[data-wi-theme="blue"] {
	--color-on-accent:       #001389;
	--logo-filter:          none;
	--color-primary:        #001389;
	--color-primary-dark:   #000E63;
	--color-accent:         #00ABFF;
	--color-accent-light:   #99DDFF;
	--color-tint:           #E2F5FF;
	--color-primary-light:  #E2F5FF;
	--color-bg-page:        #F3FBFF;
	--color-border:         #C7ECFF;
	--color-border-light:   #E2F5FF;
	--color-border-strong:  #A8E2FF;
	--color-primary-subtle: color-mix(in srgb, var(--color-accent) 35%, transparent);
}

/* Green */
:root[data-wi-theme="green"] {
	--color-on-accent:       #012824;
	--logo-filter:          none;
	--color-primary:        #012824;
	--color-primary-dark:   #011D1A;
	--color-accent:         #00CAA9;
	--color-accent-light:   #99EADD;
	--color-tint:           #E2F9F5;
	--color-primary-light:  #E2F9F5;
	--color-bg-page:        #F3FCFB;
	--color-border:         #C7F3EC;
	--color-border-light:   #E2F9F5;
	--color-border-strong:  #A8EDE2;
	--color-primary-subtle: color-mix(in srgb, var(--color-accent) 35%, transparent);
}

/* Purple */
:root[data-wi-theme="purple"] {
	--color-on-accent:       #000000;
	--logo-filter:          none;
	--color-primary:        #3C003F;
	--color-primary-dark:   #2B002D;
	--color-accent:         #CD53CB;
	--color-accent-light:   #EBBAEA;
	--color-tint:           #F9ECF9;
	--color-primary-light:  #F9ECF9;
	--color-bg-page:        #FDF7FC;
	--color-border:         #F4D9F3;
	--color-border-light:   #F9ECF9;
	--color-border-strong:  #EEC4ED;
	--color-primary-subtle: color-mix(in srgb, var(--color-accent) 35%, transparent);
}

/* Orange */
:root[data-wi-theme="orange"] {
	--color-on-accent:       #000000;
	--logo-filter:          none;
	--color-primary:        #B83C00;
	--color-primary-dark:   #842B00;
	--color-accent:         #FFD300;
	--color-accent-light:   #FFED99;
	--color-tint:           #FFFAE2;
	--color-primary-light:  #FFFAE2;
	--color-bg-page:        #FFFDF3;
	--color-border:         #FFF5C7;
	--color-border-light:   #FFFAE2;
	--color-border-strong:  #FFF0A8;
	--color-primary-subtle: color-mix(in srgb, var(--color-accent) 35%, transparent);
}

/* Berry */
:root[data-wi-theme="berry"] {
	--color-on-accent:       #FFFFFF;
	--logo-filter:          invert(1);
	--color-primary:        #4B0119;
	--color-primary-dark:   #360112;
	--color-accent:         #E6125C;
	--color-accent-light:   #F7B7CE;
	--color-tint:           #FDEBF1;
	--color-primary-light:  #FDEBF1;
	--color-bg-page:        #FEF6F9;
	--color-border:         #FBD7E4;
	--color-border-light:   #FDEBF1;
	--color-border-strong:  #F8C2D5;
	--color-primary-subtle: color-mix(in srgb, var(--color-accent) 35%, transparent);
}