/*
 * Design tokens, loaded first on every surface: the main site (inc/_core/headFiles.php),
 * Weave (templates/weave/base.html.twig) and wx-admin (wx-admin/inc/_core/headFiles.php).
 *
 * Only custom properties belong here, no selectors that style anything.
 * See docs/design-system/README.md.
 */

/*
 * Brand palette, from the Peters brand guidelines (docs/design-system/brand-guidelines.md).
 * The guidelines call jade "Green" and green "Light green"; the tints match the names used here.
 * Grey and light grey aren't brand colours.
 */
:root {
	--peters-blue: #2995D3;
	--peters-blue-rgb: 41, 149, 211;

	--peters-light-blue: #E9F4FA;
	--peters-light-blue-rgb: 233, 244, 250;

	--peters-steel: #28527C;
	--peters-steel-rgb: 40, 82, 124;

	--peters-soft-red: #E15554;
	--peters-soft-red-rgb: 225, 85, 84;

	--peters-purple: #5c4293;
	--peters-purple-rgb: 92, 66, 147;

	--peters-light-purple: #edeaf3;
	--peters-light-purple-rgb: 237, 234, 243;

	--peters-jade: #079285;
	--peters-jade-rgb: 7, 146, 133;

	--peters-light-jade: #e3f3f2;
	--peters-light-jade-rgb: 227, 243, 242;

	--peters-yellow: #F8AF14;
	--peters-yellow-rgb: 248, 175, 20;

	--peters-light-yellow: #FEF2D8;
	--peters-light-yellow-rgb: 254, 242, 216;

	--peters-green: #80b349;
	--peters-green-rgb: 128, 179, 73;

	--peters-light-green: #f1f7eb;
	--peters-light-green-rgb: 241, 247, 235;

	--peters-pink: #DA1E63;
	--peters-pink-rgb: 218, 30, 99;

	--peters-light-pink: #FEE2EE;
	--peters-light-pink-rgb: 254, 226, 238;

	--peters-navy: #1c2542;
	--peters-navy-rgb: 28, 37, 66;

	--peters-grey: #d6d6d6;
	--peters-grey-rgb: 214, 214, 214;

	--peters-light-grey: #F2F2F2;
	--peters-light-grey-rgb: 242, 242, 242;
}

/*
 * Website additions to the brand palette, for status messages only.
 * Errors and success use a standard red and green rather than soft red and jade,
 * so they read as warnings and confirmations, not as brand colours. Both carry
 * small text on white and on their tints. To be added to the brand guidelines.
 */
:root {
	--status-red: #C62828;
	--status-light-red: #FDECEA;
	--status-green: #2E7D32;
	--status-light-green: #EDF7EE;
}

/*
 * Design system tokens (2027 facelift), agreed in docs/design-system/proposal.md.
 * Components (components.css) use these, never the palette above directly.
 * px, not rem: Weave's root font size differs from the main site's.
 *
 * The colours here are the light theme. [data-theme="dark"] below restates every colour token
 * for the dark theme: a token that refers to another (var(--grey-600)) is resolved where it's
 * declared, so changing only the greys wouldn't reach it. Add any new colour token to both.
 */
:root,
[data-theme="light"] {
	color-scheme: light;

	/* Greys */
	--grey-50: #F5F5F5;
	--grey-100: #ECECEC;
	--grey-200: #D6D6D6;
	--grey-300: #CACACA;
	--grey-500: #8A8A8A;
	--grey-600: #666666;
	--grey-800: #4A4A4A;
	--grey-900: #2D2D2D;

	/* Colour roles */
	--color-text: var(--peters-navy);
	--color-text-muted: var(--grey-600);
	--color-primary: var(--peters-steel);
	--color-primary-hover: var(--peters-navy);
	--color-accent: var(--peters-pink);
	--color-on-primary: #FFFFFF; /* text on primary, danger and selected fills */
	--color-on-accent: #FFFFFF;
	--color-title: var(--peters-blue);
	--color-bg: #FFFFFF;
	--color-bg-subtle: var(--grey-50);
	--color-bg-highlight: var(--peters-light-blue);
	--color-surface: #FFFFFF; /* fields, modals, dropdown lists */
	--color-overlay: rgba(var(--peters-navy-rgb), 0.5);
	--color-border: var(--grey-300);
	--color-border-subtle: var(--grey-100);
	--color-border-field: var(--grey-500);

	/* Status: the colour is for borders and icons; error and success colours can also carry text */
	--color-success: var(--status-green);
	--color-success-bg: var(--status-light-green);
	--color-warning: var(--peters-yellow);
	--color-warning-bg: var(--peters-light-yellow);
	--color-error: var(--status-red);
	--color-error-bg: var(--status-light-red);
	--color-info: var(--peters-blue);
	--color-info-bg: var(--peters-light-blue);

	/* Dropdown chevron, drawn in the text colour */
	--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231C2542' stroke-width='2'/%3E%3C/svg%3E");

	/* Typography */
	--font-family: 'Open Sans', sans-serif;
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-size-xs: 12px;
	--font-size-sm: 14px;
	--font-size-md: 16px;
	--font-size-lg: 18px;
	--font-size-xl: 20px;
	--font-size-2xl: 24px;
	--font-size-3xl: 30px;
	--font-size-4xl: 40px;
	--line-height-body: 1.4;
	--line-height-heading: 1.2;

	/* Spacing */
	--space-1: 5px;
	--space-2: 10px;
	--space-3: 15px;
	--space-4: 20px;
	--space-5: 30px;
	--space-6: 40px;
	--space-7: 60px;
	--space-8: 80px;

	/* Corners, shadows and focus */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-full: 9999px;
	--shadow-sm: 0 1px 3px rgba(var(--peters-navy-rgb), 0.15);
	--shadow-md: 0 3px 8px rgba(var(--peters-navy-rgb), 0.2);
	--focus-ring: 2px solid var(--peters-steel);
	--focus-ring-offset: 2px;
}

/*
 * Dark theme (proposed, see docs/design-system/proposal.md#dark-mode), on <html> or on any element
 * (the /style-guide preview). Built on the brand navy, with Peters blue as the primary colour:
 * steel is too dark to read on navy. Contrast on the page background: text 15.6:1, muted text
 * 8.6:1, links and primary buttons 5.3:1, field borders 4.9:1, errors 7.4:1.
 */
[data-theme="dark"] {
	color-scheme: dark;

	/* Greys, reversed so lower numbers stay closest to the background */
	--grey-50: #1A2137;
	--grey-100: #232B45;
	--grey-200: #2E3754;
	--grey-300: #3A4466;
	--grey-500: #7C86A6;
	--grey-600: #AEB5C8;
	--grey-800: #D5D9E4;
	--grey-900: #EEF1F7;

	/* Colour roles */
	--color-text: #EEF1F7;
	--color-text-muted: #AEB5C8;
	--color-primary: var(--peters-blue);
	--color-primary-hover: #5AAEE0;
	--color-accent: var(--peters-pink);
	--color-on-primary: #121829;
	--color-on-accent: #FFFFFF;
	--color-title: var(--peters-blue);
	--color-bg: #121829;
	--color-bg-subtle: #1A2137;
	--color-bg-highlight: #1E3A5F;
	--color-surface: var(--peters-navy);
	--color-overlay: rgba(0, 0, 0, 0.6);
	--color-border: #3A4466;
	--color-border-subtle: #2E3754;
	--color-border-field: #7C86A6;

	/* Status */
	--color-success: #81C995;
	--color-success-bg: #183223;
	--color-warning: var(--peters-yellow);
	--color-warning-bg: #3A2F12;
	--color-error: #F28B82;
	--color-error-bg: #3A1D22;
	--color-info: #5AAEE0;
	--color-info-bg: #16304A;

	--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23EEF1F7' stroke-width='2'/%3E%3C/svg%3E");

	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
	--shadow-md: 0 3px 8px rgba(0, 0, 0, 0.5);
	--focus-ring: 2px solid #8CC6EA;
}