/*
 * Design tokens.
 * =============================================================================
 *
 * The branding guidelines ask for two colours plus a white background, one
 * typeface throughout, red key buttons, and a scheme that is easy to change.
 * This file is how that last part is kept true: it holds every colour, typeface
 * and spacing value in the design, and main.css contains no literal colour at
 * all. To rebrand the site, edit this file and nothing else.
 *
 * Three values below are placeholders awaiting sign-off. They are marked TO
 * CONFIRM and are safe to change in isolation.
 */

:root {

	/* ---------------------------------------------------------------------
	 * Brand
	 *
	 * Sampled from the approved events-page design. It is green, where the
	 * earlier branding note asked for red key buttons — the design is the
	 * later instruction, so it wins, and this is the file where that costs one
	 * line to reverse.
	 *
	 * Changing --jf-brand changes every primary button on the site, the
	 * homepage included. That is deliberate: a green events page beside a red
	 * homepage would read as two sites. The red the note asked for is not gone
	 * from the palette: it is what sold out looks like.
	 * ------------------------------------------------------------------ */

	/* The key colour. Buttons, the countdown strip, the eyebrow. 5.9:1 against
	 * white, so white text on it clears AA at any size. */
	--jf-brand: #496d47;

	/* Pressed and hovered states, derived from the above. */
	--jf-brand-dark: #38542f;
	--jf-brand-tint: #f2f7f2;

	/* The supporting green, for surfaces rather than type. */
	--jf-secondary: #739a70;
	--jf-secondary-tint: #e5f2e3;

	/* The ground. */
	--jf-ground: #ffffff;
	--jf-ground-raised: #f6f8f6;

	/* ---------------------------------------------------------------------
	 * Text and lines
	 *
	 * Neutrals carry a slight green bias toward the brand rather than being
	 * pure grey, so they sit with the palette instead of beside it.
	 * ------------------------------------------------------------------ */

	--jf-text: #232425;
	--jf-text-muted: #4d524d;
	--jf-text-faint: #6f756e;
	--jf-line: #e4e8e3;
	--jf-line-strong: #c7cec6;

	/* The edge of an event card. Its own token rather than --jf-line, because
	 * a card sits on white with only a soft shadow under it and needs a little
	 * more definition than a rule between two blocks of text does. */
	--jf-card-line: #ccd4cb;

	/* ---------------------------------------------------------------------
	 * Promotional labels
	 *
	 * Four states, not one colour. A label saying "tickets going fast" and a
	 * label saying "sold out" are different messages and the design gives them
	 * different colours; jobfairs_badge_tone() decides which a given badge is.
	 *
	 * Every pair below clears 4.5:1, which is what settles the text colour on
	 * each: white on the amber is 2.7:1 and unreadable, so the amber takes
	 * dark text. The green is a shade darker than the design's #5d895c, which
	 * came in at 4.1:1 — the difference is invisible and the label is legible.
	 * ------------------------------------------------------------------ */

	--jf-label-available-bg: #4f7a4e;
	--jf-label-available-text: #ffffff;

	--jf-label-going-bg: #d78f42;
	--jf-label-going-text: #232425;

	--jf-label-urgent-bg: #ba4640;
	--jf-label-urgent-text: #ffffff;

	/* Sold out. One value for every part of the treatment — this label, the
	 * countdown strip on a sold-out card, and the full tickets bar — so the
	 * three read as one state rather than three near-misses. Bright rather
	 * than the deep red above, because sold out is the loudest thing a card
	 * has to say. 4.6:1 against white, which the white wording needs. */
	--jf-sold-out: #de3226;

	/* The same red a shade down, for the hover on the one place that red is a
	 * link: the cart's remove control. Paired with the value above the way
	 * --jf-brand-dark is paired with --jf-brand, so a red link darkens on hover
	 * exactly as a green button does. 6.4:1 against white. */
	--jf-sold-out-dark: #b32a20;

	--jf-label-closed-bg: var(--jf-sold-out);
	--jf-label-closed-text: #ffffff;

	/* The recruiter side's label, for Phase 5. */
	--jf-label-recruiter-bg: #496d47;
	--jf-label-recruiter-text: #ffffff;

	/* Status, used by the sold-out and selling-fast treatments. */
	--jf-status-urgent: #ba4640;
	--jf-status-good: #496d47;

	/* The tickets-taken bar. A full one is the sold-out red, the same as the
	 * label above the card and the strip across it; 3.9:1 against the track,
	 * which clears the 3:1 a non-text element needs. The "Sold out" wording
	 * beside it stays --jf-status-urgent, the darker red, because it is read
	 * rather than glanced at. */
	--jf-progress-track: #ebedea;
	--jf-progress-fill: #7fa57c;
	--jf-progress-fill-full: var(--jf-sold-out);

	/* ---------------------------------------------------------------------
	 * The events page header
	 *
	 * A soft green wash behind the heading, deepening toward the bottom right.
	 * It is the one gradient in the design.
	 * ------------------------------------------------------------------ */

	--jf-band-from: #e5f2e3;
	--jf-band-to: #c6dec4;
	--jf-band-pill: #f4f9f4;

	/* The dark pill, which is nearly but not quite black. */
	--jf-ink: #232425;
	--jf-ink-text: #ffffff;

	/* Decorative icons beside a fact. Never the only carrier of meaning —
	 * the word each one stands for is in the markup beside it. */
	--jf-icon: #648362;

	/* ---------------------------------------------------------------------
	 * Focus
	 *
	 * A single visible focus treatment, used everywhere. Requirement 22.
	 * ------------------------------------------------------------------ */

	--jf-focus: #14181f;
	--jf-focus-width: 3px;
	--jf-focus-offset: 2px;

	/* ---------------------------------------------------------------------
	 * Typography
	 *
	 * One family throughout, as specified: Google Sans Flex, self-hosted and
	 * declared at the top of main.css. Not loaded from a font CDN — see the
	 * reasoning there.
	 *
	 * The system stack behind it is not decoration. font-display: swap means
	 * every visitor reads the page in it for the first few hundred
	 * milliseconds, and anyone whose connection drops the file reads the whole
	 * page in it, so it stays a full stack rather than a bare sans-serif.
	 * ------------------------------------------------------------------ */

	--jf-font: "Google Sans Flex", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* A fluid scale. Each step is clamped so it never collapses on a phone or
	 * runs away on a wide desktop, and no step needs a media query. */
	--jf-size-xs: 0.78rem;
	--jf-size-sm: 0.875rem;
	--jf-size-base: 1rem;
	--jf-size-md: clamp(1.05rem, 0.99rem + 0.3vw, 1.2rem);
	--jf-size-lg: clamp(1.25rem, 1.13rem + 0.6vw, 1.6rem);
	--jf-size-xl: clamp(1.6rem, 1.35rem + 1.25vw, 2.35rem);
	--jf-size-2xl: clamp(2rem, 1.5rem + 2.5vw, 3.4rem);

	--jf-weight-normal: 400;
	--jf-weight-medium: 500;
	--jf-weight-bold: 700;

	--jf-leading-tight: 1.15;
	--jf-leading-snug: 1.35;
	--jf-leading-normal: 1.6;

	/* Running text is capped at this so a line never outruns the eye. */
	--jf-measure: 68ch;

	/* ---------------------------------------------------------------------
	 * Space
	 *
	 * A single scale. Layout uses gap rather than per-element margins, so these
	 * are consumed mostly by grid and flex containers.
	 * ------------------------------------------------------------------ */

	--jf-space-3xs: 0.25rem;
	--jf-space-2xs: 0.5rem;
	--jf-space-xs: 0.75rem;
	--jf-space-sm: 1rem;
	--jf-space-md: 1.5rem;
	--jf-space-lg: 2rem;
	--jf-space-xl: 3rem;
	--jf-space-2xl: 4.5rem;
	--jf-space-3xl: 6rem;

	/* ---------------------------------------------------------------------
	 * Shape and depth
	 * ------------------------------------------------------------------ */

	--jf-radius-sm: 3px;
	--jf-radius-md: 6px;
	/* Cards and the search field. The design's corners are softer than the
	 * foundation's were. */
	--jf-radius-lg: 12px;
	--jf-radius-pill: 999px;

	--jf-shadow-sm: 0 1px 2px rgba(20, 24, 31, 0.08);
	--jf-shadow-md: 0 4px 16px rgba(20, 24, 31, 0.1);
	/* For the one thing that floats over the page rather than sitting on it.
	 * Two layers: a tight one to draw the edge and a wide soft one to lift the
	 * whole card off what it is covering. */
	--jf-shadow-lg: 0 2px 6px rgba(20, 24, 31, 0.08), 0 12px 32px rgba(20, 24, 31, 0.18);

	/* The Lucide chevron, as a mask for the one control that cannot reference
	 * the sprite: a select draws its own arrow, and replacing it means a shape
	 * in CSS rather than an <svg> in the markup. The path is the same
	 * chevron-down inc/icons.php holds. The black is the mask's alpha channel
	 * rather than a colour — what is seen is the currentColor painted through
	 * it — which is why this is here with the shapes and not with the palette. */
	/* The mark inside a notice's badge: Lucide's check and x, and no circle,
	 * because the circle is a border-radius and a background colour on the
	 * element wearing them. Splitting it that way is what keeps the badge's
	 * colour a token — one two-colour image would have carried its own copy of
	 * --jf-brand, and no amount of editing that token would have reached it.
	 *
	 * They are drawn in CSS at all for the reason the chevron above is: the
	 * element wearing them is WooCommerce's own markup on one of the two paths
	 * that render a notice, so there is nowhere to put an <svg> that both would
	 * share.
	 *
	 * White is written into them, and is the one colour in either that is not a
	 * token. It is not a brand value that might change: it is the ink on a
	 * coloured badge, the same relationship in both, and the badge underneath
	 * carries the colour. A heavier stroke than the sprite uses, because these
	 * are read at about 12px rather than 20. */
	--jf-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--jf-x-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");

	--jf-chevron-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

	/*
	 * The same shopping-cart shape inc/icons.php draws into the sprite, copied
	 * in as a mask rather than referenced with <use>: this one has to sit in a
	 * WooCommerce notice's own ::before, which is not inside the page's <svg>.
	 */
	--jf-cart-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E");

	/* The wash over the homepage photograph, so the heading stays legible
	 * whatever is uploaded. Darker at the foot, where the copy sits. */
	--jf-scrim-top: rgba(20, 24, 31, 0.35);
	--jf-scrim-bottom: rgba(20, 24, 31, 0.72);

	/* The homepage hero with no photograph set. Deliberately the secondary
	 * brand colour rather than a grey, so the white route cards and red
	 * buttons read as a designed block instead of a missing image. Change
	 * this one value to change the hero. */
	--jf-hero-ground: var(--jf-brand-dark);
	--jf-hero-ground-text: #ffffff;

	/* ---------------------------------------------------------------------
	 * Layout
	 * ------------------------------------------------------------------ */

	--jf-container: 1240px;
	--jf-container-narrow: 760px;
	--jf-gutter: var(--jf-space-sm);

	/* ---------------------------------------------------------------------
	 * Motion
	 *
	 * One duration and one easing, so transitions across the site feel like one
	 * system. Every use is disabled under prefers-reduced-motion in main.css.
	 * ------------------------------------------------------------------ */

	--jf-duration: 160ms;
	--jf-ease: cubic-bezier(0.2, 0, 0.2, 1);
}

@media (min-width: 48em) {
	:root {
		--jf-gutter: var(--jf-space-lg);
	}
}