/*
 * Ferndale Intranet: fonts and design tokens.
 *
 * Loads first on the front end, the login page and in the block editor.
 * This is the ONLY file that holds brand values. Everything else (theme
 * CSS and every plugin compatibility stylesheet) uses the role tokens
 * (--fi-*), so one stylesheet serves both designs:
 *   - Version B "ferndale" (default): :root below.
 *   - Version A "classic": :root[data-design="classic"] and .fi-design-classic.
 *
 * Role tokens (DESIGN-BRIEF §2; 04 §2.2 and §4.1):
 *   --fi-primary / -hover / --fi-on-primary   filled buttons, table headers, selected states
 *   --fi-accent / --fi-on-accent              badges, pills, chips (text on it: --fi-on-accent)
 *   --fi-accent-line                          decorative bars only, never text
 *   --fi-header-bg / --fi-header-text         header, drawer, footer (always dark)
 *   --fi-header-accent                        transparent in both (Version A took Version B's menu on 9 Oct 2026)
 *   --fi-current                              current page bar (gold in both)
 *   --fi-focus / --fi-focus-on-dark           focus ring on light / dark surfaces
 *   --fi-link / --fi-link-hover
 *   --fi-text / --fi-heading / --fi-h2 / --fi-h3 / --fi-muted
 *   --fi-page-bg / --fi-card-bg / --fi-surface / --fi-surface-2 / --fi-tint
 *   --fi-border (decorative) / --fi-control-border (inputs: 3:1 on every light surface)
 *   --fi-control-bg / --fi-placeholder
 *   --fi-success (-hover, -tint) / --fi-danger (-hover, -tint) / --fi-warning-text / --fi-warning-tint / --fi-info / --fi-info-tint
 *   --fi-card-accent / -2 / -3                card top borders (B rotates gold, blue, fern)
 *   --fi-font / --fi-font-display / --fi-font-brand
 *   --fi-radius-sm 8 / --fi-radius-control 10 / --fi-radius 12 / --fi-radius-lg 18 / --fi-radius-xl 24 / --fi-radius-pill
 *   --fi-shadow-sm / --fi-shadow / --fi-shadow-lg / --fi-shadow-header / --fi-shadow-panel / --fi-shadow-sheet
 *   --fi-backdrop (drawer) / --fi-overlay (login redirect overlay)
 *   --fi-icon-check / --fi-icon-search / --fi-icon-calendar   CSS mask images (Phosphor)
 *   --fi-content 760px / --fi-wide 75rem / --fi-gutter
 *   --fi-z-header 1100 / --fi-z-topbar 1110 / --fi-z-skip 100000 / --fi-z-drawer 100001 (04 §4.5)
 *   --fi-header-h (measured by theme.js) / --fi-ease / --fi-duration
 */

/* ------------------------------------------------------------------
 * Fonts (self-hosted; no requests to Google at run time).
 * Plus Jakarta Sans (SIL OFL) for all interface and body text, both designs.
 * Merriweather 700 latin (SIL OFL) for Version A's wordmark and h1/h2.
 * ------------------------------------------------------------------ */
@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/plus-jakarta-sans-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;
}

@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: italic;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/plus-jakarta-sans-italic-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;
}

@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: italic;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/plus-jakarta-sans-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Merriweather";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/merriweather-700-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;
}

/* ------------------------------------------------------------------
 * Brand tokens (www.ferndalecs.com) and Version B role tokens.
 * ------------------------------------------------------------------ */
:root {
	/* The page declares light and dark support, so Chrome and Samsung
	 * Internet don't force-darken it. Never narrow this to "light": every
	 * surface and form control sets its own colours instead. */
	color-scheme: light dark;

	--fcs-navy: #0f2385;          /* White text: 13:1. */
	--fcs-navy-deep: #0a1866;
	--fcs-navy-ink: #081452;
	--fcs-ink: #040922;           /* Headings. */
	--fcs-text: #1c2236;          /* Body text: 15:1 on white. */
	--fcs-muted: #4f566e;         /* Secondary text: 7:1 on white. */
	--fcs-link: #1f4fd6;          /* Links: 6.7:1 on white. */
	--fcs-blue: #3269ff;
	--fcs-steel: #425a9e;
	--fcs-gold: #ffe9b3;          /* Navy text on gold: 11:1. */
	--fcs-gold-strong: #f2b632;   /* Decorative accents only. */
	--fcs-gold-tint: #fff6df;
	--fcs-lavender: #b8a9d8;
	--fcs-lavender-tint: #f1edf9;
	--fcs-fern: #2e6b34;          /* White text: 6.4:1. */
	--fcs-fern-tint: #e8f2e9;
	--fcs-blue-tint: #e9efff;
	--fcs-surface: #f4f6fb;
	--fcs-surface-2: #eaeef8;
	--fcs-border: #dfe3ee;
	--fcs-grey: #d1d1d1;
	--fcs-white: #ffffff;
	--fcs-focus: #3269ff;

	--fcs-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--fcs-font-serif: Merriweather, Georgia, "Times New Roman", serif;

	--fcs-radius-sm: 8px;
	--fcs-radius: 12px;
	--fcs-radius-lg: 18px;
	--fcs-radius-xl: 24px;

	--fcs-shadow-sm: 0 1px 2px rgba(4, 9, 34, 0.06), 0 1px 3px rgba(4, 9, 34, 0.08);
	--fcs-shadow: 0 12px 28px -14px rgba(4, 9, 34, 0.28);
	--fcs-shadow-lg: 0 28px 60px -24px rgba(4, 9, 34, 0.4);

	--fcs-content: 47.5rem;
	--fcs-wide: 75rem;

	/* Icons drawn by CSS masks (Phosphor Icons, MIT). */
	--fcs-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='black'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E");
	--fcs-icon-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='black'%3E%3Cpath d='M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Zm-32-80a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,136Zm0,32a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,168Z'/%3E%3C/svg%3E");
	--fcs-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='black'%3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E");
	--fcs-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='black'%3E%3Cpath d='M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'/%3E%3C/svg%3E");
	--fcs-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='black'%3E%3Cpath d='M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-68-76a12,12,0,1,1-12-12A12,12,0,0,1,140,132Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,132ZM96,172a12,12,0,1,1-12-12A12,12,0,0,1,96,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,140,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,172Z'/%3E%3C/svg%3E");

	/* --- Role tokens: Version B "ferndale" (default) --- */
	--fi-primary: var(--fcs-navy);
	--fi-primary-hover: var(--fcs-navy-deep);
	--fi-on-primary: var(--fcs-white);
	--fi-accent: var(--fcs-gold);
	--fi-on-accent: var(--fcs-navy);
	--fi-accent-hover: #ffdb85;
	--fi-accent-line: var(--fcs-gold-strong);
	--fi-header-bg: var(--fcs-navy);         /* Mirrored in inc/enqueue.php fi_header_colour(). */
	--fi-header-bg-deep: var(--fcs-navy-deep);
	--fi-header-text: var(--fcs-white);
	--fi-header-accent: transparent;
	--fi-header-accent-hover: rgba(255, 255, 255, 0.12);
	--fi-on-dark-hover: rgba(255, 255, 255, 0.12);
	--fi-on-dark-border: rgba(255, 255, 255, 0.16);
	--fi-on-dark-muted: rgba(255, 255, 255, 0.78);
	--fi-current: var(--fcs-gold);
	--fi-focus: var(--fcs-focus);
	--fi-focus-on-dark: var(--fcs-gold);
	--fi-link: var(--fcs-link);
	--fi-link-hover: var(--fcs-navy);
	--fi-text: var(--fcs-text);
	--fi-heading: var(--fcs-ink);
	--fi-h2: var(--fcs-navy);
	--fi-h3: var(--fcs-ink);
	--fi-muted: var(--fcs-muted);
	--fi-page-bg: var(--fcs-white);
	--fi-card-bg: var(--fcs-white);
	--fi-surface: var(--fcs-surface);
	--fi-surface-2: var(--fcs-surface-2);
	--fi-tint: var(--fcs-blue-tint);
	--fi-border: var(--fcs-border);
	--fi-control-border: #7d849a;   /* 3.2:1 or more on every light surface (04 §4.1). */
	--fi-control-bg: var(--fcs-white);
	--fi-placeholder: #6b7186;      /* 4.85:1 on white. */
	--fi-success: var(--fcs-fern);
	--fi-success-hover: #24552a;
	--fi-success-tint: var(--fcs-fern-tint);
	--fi-danger: #b42318;           /* 6.57:1 on white. */
	--fi-danger-hover: #8f1c13;
	--fi-danger-tint: #fef3f2;
	--fi-warning-text: #7a4b00;     /* 7.41:1 on white. */
	--fi-warning-tint: var(--fcs-gold-tint);
	--fi-warning-line: var(--fcs-gold-strong);
	--fi-info: var(--fcs-link);
	--fi-info-tint: var(--fcs-blue-tint);
	--fi-row-alt: #f8f9fd;          /* Table zebra rows. */
	--fi-card-accent: var(--fcs-gold-strong);
	--fi-card-accent-2: var(--fcs-blue);
	--fi-card-accent-3: var(--fcs-fern);

	/* Title band, greeting band and the drawer. */
	--fi-band-bg: linear-gradient(100deg, var(--fcs-navy-ink) 0%, var(--fcs-navy) 55%, var(--fcs-steel) 140%);
	--fi-band-text: var(--fcs-white);
	--fi-band-muted: rgba(255, 255, 255, 0.86);
	--fi-band-accent: var(--fcs-gold);
	--fi-band-eyebrow: var(--fcs-gold);
	--fi-drawer-bg: var(--fcs-navy-deep);
	--fi-footer-bg: var(--fcs-navy-ink);

	/* Buttons on dark surfaces (drawer search, Menu button). */
	--fi-on-dark-btn-bg: var(--fcs-gold);
	--fi-on-dark-btn-text: var(--fcs-navy);
	--fi-on-dark-btn-hover: var(--fcs-white);
	--fi-menu-btn-radius: 999px;

	/* Account initials. */
	--fi-avatar-bg: var(--fcs-gold);
	--fi-avatar-text: var(--fcs-navy);

	/* Main menu (desktop bar). B: white links, gold underline for the current page. */
	--fi-menu-item-bg: transparent;
	--fi-menu-item-hover: rgba(255, 255, 255, 0.12);
	--fi-menu-size: 0.96rem;
	--fi-menu-weight: 650;
	--fi-menu-case: none;
	--fi-menu-tracking: 0;
	--fi-menu-gap: 0.125rem;
	--fi-menu-radius: 10px;
	--fi-menu-current-inset: 0.8rem;
	--fi-menu-current-bottom: 0.3rem;
	--fi-current-tint: var(--fcs-gold-tint);
	--fi-band-watermark: 0.07;

	/* Login page: a dark top half with a subtle curve (B), a white card. */
	--fi-login-bg: var(--fcs-surface);
	--fi-login-band: linear-gradient(165deg, var(--fcs-navy-ink) 0%, var(--fcs-navy) 55%, #1a37a6 100%);
	--fi-login-curve: 4rem;
	--fi-login-watermark: 0.07;

	/* Articles: B is a white page without a card around the text. */
	--fi-article-bg: transparent;
	--fi-article-pad: 0px;
	--fi-article-shadow: none;
	--fi-article-border-top: 0;

	--fi-font: var(--fcs-font);
	--fi-font-display: var(--fcs-font);
	--fi-font-brand: var(--fcs-font);
	--fi-display-weight: 800;
	--fi-heading-weight: 750;
	--fi-display-tracking: -0.025em;

	--fi-radius-sm: var(--fcs-radius-sm);
	--fi-radius-control: 10px;
	--fi-radius: var(--fcs-radius);
	--fi-radius-lg: var(--fcs-radius-lg);
	--fi-radius-xl: var(--fcs-radius-xl);
	--fi-radius-pill: 999px;

	--fi-shadow-sm: var(--fcs-shadow-sm);
	--fi-shadow: var(--fcs-shadow);
	--fi-shadow-lg: var(--fcs-shadow-lg);
	--fi-shadow-header: 0 10px 30px -18px rgba(4, 9, 34, 0.6);    /* Stuck header. */
	--fi-shadow-panel: 0 18px 30px -24px rgba(4, 9, 34, 0.5);     /* Search panel under the header. */
	--fi-shadow-sheet: 0 -18px 30px -28px rgba(4, 9, 34, 0.55);   /* Bottom sheets on phones (Dashboard pop-up, Chippy basket). */
	--fi-backdrop: rgba(4, 9, 34, 0.55);                          /* Drawer backdrop. */
	--fi-overlay: rgba(4, 9, 34, 0.45);                           /* Login redirect overlay. */

	/* Icons drawn by CSS masks (colour them with background: currentColor). */
	--fi-icon-check: var(--fcs-icon-check);
	--fi-icon-search: var(--fcs-icon-search);
	--fi-icon-calendar: var(--fcs-icon-calendar);

	--fi-content: var(--fcs-content);
	--fi-wide: var(--fcs-wide);
	--fi-gutter: clamp(1rem, 4vw, 2rem);

	--fi-z-header: 1100;
	--fi-z-topbar: 1110;
	--fi-z-skip: 100000;
	--fi-z-drawer: 100001;
	--fi-header-h: 5.25rem;
	--fi-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--fi-duration: 0.15s;
}

/* ------------------------------------------------------------------
 * Version A "classic": today's identity (teal-navy header, green menu,
 * fern mark, Merriweather wordmark), now accessible (04 §2.3).
 * ------------------------------------------------------------------ */
:root[data-design="classic"],
.fi-design-classic {
	--fi-primary: #08466c;          /* White text: 9.99:1. */
	--fi-primary-hover: #063a5a;    /* White text: 11.93:1. */
	--fi-on-primary: #ffffff;
	--fi-accent: #006e54;           /* White text: 6.25:1. */
	--fi-on-accent: #ffffff;
	--fi-accent-hover: #005a45;
	--fi-accent-line: #006e54;
	--fi-header-bg: #08466c;        /* Mirrored in inc/enqueue.php fi_header_colour(). */
	--fi-header-bg-deep: #063a5a;
	--fi-header-text: #ffffff;
	--fi-current: var(--fcs-gold);  /* 8.35:1 on #08466c. */
	--fi-focus-on-dark: var(--fcs-gold);
	--fi-link: #1e73be;             /* 4.94:1 on white, 4.65:1 on #f7f8f9. */
	--fi-link-hover: #08466c;
	--fi-text: #222222;
	--fi-heading: #222222;
	--fi-h2: #08466c;
	--fi-h3: #08466c;
	--fi-muted: #575760;            /* 6.72:1 on #f7f8f9. */
	--fi-page-bg: #f7f8f9;
	--fi-card-bg: #ffffff;
	--fi-surface: #f7f8f9;
	--fi-surface-2: #eceff2;
	--fi-tint: #e6f0f5;             /* #08466c on it: 8.63:1. */
	--fi-border: #dde3e8;
	--fi-info: #08466c;
	--fi-info-tint: #e6f0f5;
	--fi-row-alt: #f7f9fa;
	--fi-card-accent: #006e54;
	--fi-card-accent-2: #006e54;
	--fi-card-accent-3: #006e54;

	--fi-band-bg: transparent;
	--fi-band-text: #08466c;
	--fi-band-muted: #575760;
	--fi-band-accent: #006e54;
	--fi-band-eyebrow: #006e54;
	--fi-drawer-bg: #063a5a;
	--fi-footer-bg: #08466c;

	/* The menu is Version B's (white links, a gold underline on the current
	 * page, the gold pill Menu button and gold initials on phones and in the
	 * account button), on Version A's teal header: the administrator's choice
	 * on 9 Oct 2026 (it replaced the green tabs). Only the text on gold is
	 * teal here, so it still reads as Version A. */
	--fi-on-dark-btn-text: #08466c;   /* On the gold pill: 8.35:1. */
	--fi-avatar-text: #08466c;        /* On the gold circle: 8.35:1. */
	--fi-current-tint: #e6f0f5;
	--fi-band-watermark: 0;

	--fi-login-bg: #f7f8f9;
	--fi-login-band: linear-gradient(165deg, #063a5a 0%, #08466c 60%, #0b5583 100%);
	--fi-login-curve: 0px;
	--fi-login-watermark: 0.08;

	--fi-article-bg: #ffffff;
	--fi-article-pad: clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem);
	--fi-article-shadow: 0 1px 2px rgba(8, 70, 108, 0.06), 0 8px 24px -16px rgba(8, 70, 108, 0.35);
	--fi-article-border-top: 4px solid #006e54;

	--fi-font-display: var(--fcs-font-serif);
	--fi-font-brand: var(--fcs-font-serif);
	--fi-display-weight: 700;
	--fi-heading-weight: 700;
	--fi-display-tracking: -0.01em;
}