/**
 * Société Jersiaise, design tokens
 *
 * Single source of truth. No raw colour, size, spacing or radius value
 * should appear anywhere else in the codebase.
 *
 * SCOPE: this file refines the CONSISTENCY of the existing brand. It does
 * not introduce typefaces, brand colours or new visual language. Open Sans
 * throughout. h1 uppercase, all other headings lowercase.
 *
 * Values are marked:
 *   BRAND     established brand value, do not change without client sign off
 *   AUDITED   measured from the live site, kept as is
 *   UNIFORMED an existing value regularised across the scale
 *   NEW       no equivalent existed, needed for the shop
 *
 * Root font size is assumed to be 16px.
 */

:root {

	/* ---------------------------------------------------------------
	 * Colour, brand
	 * --------------------------------------------------------------- */

	--sj-color-navy: #353678;          /* BRAND.   Elementor global primary. Headings, buttons, links */
	--sj-color-navy-deep: #0E1252;     /* AUDITED. Hover and pressed states */
	--sj-color-sage: #8DC39F;          /* BRAND.   Elementor global accent. Background use only, see notes */
	--sj-color-sage-text: #3E7256;     /* NEW.     Readable variant of the brand accent, for text use only */

	/* ---------------------------------------------------------------
	 * Colour, ink
	 * --------------------------------------------------------------- */

	--sj-color-ink: #242424;           /* BRAND.   Elementor global text. See open question 1 */
	--sj-color-ink-body: #6A6A6A;      /* AUDITED. The colour body copy actually renders at */
	--sj-color-ink-strong: #2D2D2D;    /* AUDITED. Dark button background */
	--sj-color-ink-muted: #9CA6B8;     /* BRAND.   Elementor global. Decorative and non-essential text only */
	--sj-color-ink-inverse: #FFFFFF;

	/* ---------------------------------------------------------------
	 * Colour, surface
	 * --------------------------------------------------------------- */

	--sj-color-surface: #FFFFFF;             /* AUDITED */
	--sj-color-surface-tint: #F6F7F9;        /* BRAND.   Elementor global */
	--sj-color-surface-tint-strong: #EDF0F7; /* AUDITED */
	--sj-color-border: #E7EAF0;              /* BRAND.   Elementor global */

	/* ---------------------------------------------------------------
	 * Colour, feedback
	 *
	 * NEW. No feedback palette exists on the live site. WooCommerce notices,
	 * form validation and stock states need one. All meet WCAG AA on white.
	 * These are functional UI colours, not brand additions, but they are
	 * still worth putting in front of the client.
	 * --------------------------------------------------------------- */

	--sj-color-success: var(--sj-color-sage-text);
	--sj-color-error: #B3261E;
	--sj-color-warning: #8A5300;
	--sj-color-info: var(--sj-color-navy);

	--sj-color-success-bg: #EAF2ED;
	--sj-color-error-bg: #FBEDEC;
	--sj-color-warning-bg: #FAF2E6;
	--sj-color-info-bg: #E7EAF0;             /* NEW. Client selected. Notice ground */

	/* ---------------------------------------------------------------
	 * Typography, family
	 *
	 * BRAND. Open Sans throughout. There is no display face and no
	 * secondary face. Do not add one.
	 * --------------------------------------------------------------- */

	--sj-font: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--sj-font-mono: ui-monospace, "SF Mono", Menlo, monospace;

	/* ---------------------------------------------------------------
	 * Typography, scale
	 *
	 * UNIFORMED. The live site renders fourteen distinct heading
	 * treatments. These seven steps replace them. Every value is drawn
	 * from a size already in use, with the strays (19px, 19.44px,
	 * 25.17px) collapsed into their nearest neighbour.
	 * --------------------------------------------------------------- */

	--sj-text-3xs: 0.8125rem;  /* 13px. Legal, image credits */
	--sj-text-2xs: 0.875rem;   /* 14px. Eyebrows and labels */
	--sj-text-xs: 1rem;        /* 16px. Dense UI text */
	--sj-text-sm: 1.0625rem;   /* 17px. Body default */
	--sj-text-md: 1.125rem;    /* 18px. Lead paragraphs, h5 */
	--sj-text-lg: 1.25rem;     /* 20px. h4, card titles */
	--sj-text-xl: 1.5rem;      /* 24px. h3, was 25.17px */
	--sj-text-2xl: 2.125rem;   /* 34px. h2 */
	--sj-text-3xl: clamp(2.25rem, 1.5rem + 3.75vw, 3.75rem); /* 36 to 60px. h1 only */

	/* ---------------------------------------------------------------
	 * Typography, weight
	 *
	 * UNIFORMED. The site loads nine Open Sans weights plus every italic.
	 * These three are all the design uses.
	 * --------------------------------------------------------------- */

	--sj-weight-regular: 400;
	--sj-weight-semibold: 600;
	--sj-weight-bold: 700;
	--sj-weight-black: 800;   /* h1 only */

	/* ---------------------------------------------------------------
	 * Typography, line height
	 *
	 * UNIFORMED. Leading tightens as size increases. The live site applies
	 * leading almost at random, producing 1.07 on one 14px heading and
	 * 1.57 on another.
	 * --------------------------------------------------------------- */

	--sj-leading-display: 1.15;   /* h1 */
	--sj-leading-tight: 1.25;     /* h2 */
	--sj-leading-snug: 1.35;      /* h3, h4 */
	--sj-leading-normal: 1.5;     /* h5, h6, UI text */
	--sj-leading-body: 1.8;       /* AUDITED. Body copy, retained */

	/* ---------------------------------------------------------------
	 * Typography, tracking
	 *
	 * UNIFORMED, and the single biggest consistency win in this file.
	 *
	 * The live site applies a flat -0.2px at every size. Because that is a
	 * pixel value it is proportionally huge on small text and invisible on
	 * large. Expressed in em it scales correctly, and the value now steps
	 * with size the way tracking should: tighter as text grows, open at
	 * caps and small sizes.
	 * --------------------------------------------------------------- */

	--sj-tracking-caps: 0.035em;    /* h1 and eyebrows. Uppercase always needs opening up */
	--sj-tracking-display: -0.02em; /* 34px and above */
	--sj-tracking-heading: -0.01em; /* 18px to 24px */
	--sj-tracking-body: -0.012em;   /* AUDITED. 17px body, the site's existing -0.2px */
	--sj-tracking-tight: -0.03em;   /* AUDITED. Buttons */
	--sj-tracking-none: 0;          /* 14px and below. Small text needs no negative tracking */

	/* ---------------------------------------------------------------
	 * Spacing
	 *
	 * NEW. The live site has no discernible spacing scale.
	 * --------------------------------------------------------------- */

	--sj-space-1: 0.25rem;
	--sj-space-2: 0.5rem;
	--sj-space-3: 0.75rem;
	--sj-space-4: 1rem;
	--sj-space-5: 1.5rem;
	--sj-space-6: 2rem;
	--sj-space-7: 3rem;
	--sj-space-8: 4rem;
	--sj-space-9: 6rem;
	--sj-space-10: 8rem;

	--sj-section-y: clamp(3rem, 6vw, 6rem);

	/* ---------------------------------------------------------------
	 * Radius
	 *
	 * UNIFORMED. 6px is the established value, on 156 elements. 4px is the
	 * established secondary. The 2px, 3px, 5px and 7px strays collapse into
	 * these two.
	 * --------------------------------------------------------------- */

	--sj-radius-sm: 4px;
	--sj-radius-md: 6px;
	--sj-radius-lg: 12px;
	--sj-radius-pill: 999px;

	/* ---------------------------------------------------------------
	 * Border width
	 *
	 * NEW. No border width token existed, but the style guide specifies two
	 * widths verbatim: a 1px navy border on the secondary button, and a 4px
	 * left border on notices. Without tokens those become raw values in
	 * component CSS, which is the one thing this file exists to prevent.
	 *
	 * Functional UI values, not brand values, so a build decision under the
	 * governance rules rather than something needing client sign off.
	 * --------------------------------------------------------------- */

	--sj-border-width: 1px;        /* Hairlines, dividers, secondary button */
	--sj-border-width-thick: 4px;  /* Notice left border, active states */

	/* ---------------------------------------------------------------
	 * Aspect ratio
	 *
	 * NEW. The catalogue is 225 books out of 226 products, photographed
	 * portrait against white. Cropping a book cover to a square loses the
	 * title, so product images are contained rather than covered and the
	 * frame is fixed by this ratio to keep the grid even.
	 *
	 * A build decision under the governance rules, not a brand value.
	 * --------------------------------------------------------------- */

	--sj-ratio-product: 3 / 4;

	/* ---------------------------------------------------------------
	 * Cover frame
	 *
	 * NEW. Catalogue covers are bottom aligned to a common baseline inside a
	 * fixed height frame, so a row of books reads as a shelf rather than a
	 * row of boxes. The frame is a height, not a ratio, because each cover
	 * keeps its own proportions: a tall paperback, a square CD and a wide
	 * folded map all sit on the same line and none of them is cropped.
	 * --------------------------------------------------------------- */

	--sj-cover-height: 13rem;
	--sj-cover-height-lg: 15rem;

	/* NEW. Ceiling on a catalogue cover in a tile, so a tall portrait book does
	 * not stretch its row out of proportion at the widest breakpoints. */
	--sj-cover-max: 380px;

	/* ---------------------------------------------------------------
	 * Controls
	 *
	 * NEW. The accessibility floor sets a 44px minimum for anything
	 * interactive, and both the style guide and WCAG 2.5.5 name that figure.
	 * Defining it once stops it being retyped into every button, input and
	 * checkbox.
	 * --------------------------------------------------------------- */

	--sj-tap-target: 44px;

	/**
	 * NEW. A secondary control sitting beside a price in a product tile, where
	 * a 44px block reads as heavier than the thing it is selling.
	 *
	 * 36px clears WCAG 2.5.8 Target Size (Minimum), which is 24px and is the AA
	 * requirement. The 44px target stays on every primary control, which is the
	 * AAA 2.5.5 figure the accessibility floor asks for.
	 */
	--sj-tap-target-sm: 36px;

	/**
	 * NEW. Checkbox and radio box size.
	 *
	 * 24px, which is exactly the WCAG 2.5.8 Target Size (Minimum) floor, so a
	 * checkbox passes on its own rather than relying on its label to carry it.
	 * Browsers draw these at around 13 to 16px by default, which does not.
	 */
	--sj-control-check: 1.5rem;

	/* NEW. One height for controls that sit in a row together, so a quantity
	 * field and the button beside it cannot end up a few pixels apart. */
	--sj-control-height: 52px;

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

	--sj-container: 1220px;        /* AUDITED. The rest of societe.je */
	--sj-container-narrow: 720px;  /* NEW. Prose measure */

	/**
	 * NEW. The shop runs wider than the rest of the site, by decision.
	 *
	 * 1220px is the audited width of an Elementor page whose content is mostly
	 * a single column of text. A catalogue of 226 covers is a different
	 * problem: at 1220 the grid gets 836px of a 1600px screen and the covers
	 * are squeezed to 209px columns.
	 *
	 * tokens.css only loads on shop pages and the style guide, so this cannot
	 * move anything else on the site.
	 */
	--sj-container-wide: 1720px;
	--sj-container-product: 1500px;  /* NEW. The single product page reads better narrower */

	/* NEW. One width for every facet chip, so the filter row reads as a set. */
	--sj-facet-width: 9.5rem;
	--sj-search-width: 20rem;  /* NEW. Catalogue search at the end of the filter row */
	--sj-drawer-width: 26rem;  /* NEW. Header mini-cart panel */

	/**
	 * NEW. My Account navigation column.
	 *
	 * Sized to hold "Account details", the longest item in the menu, on one
	 * line at the navigation's own font size. A wider column would only add
	 * empty space; a narrower one wraps that item and the list loses its rhythm.
	 */
	--sj-sidebar-account: 15rem;
	--sj-gutter: clamp(1rem, 4vw, 2rem);

	/* ---------------------------------------------------------------
	 * Elevation
	 * --------------------------------------------------------------- */

	--sj-shadow-sm: 0 1px 2px rgba(53, 54, 120, 0.06);
	--sj-shadow-md: 0 4px 16px rgba(53, 54, 120, 0.10);

	/**
	 * NEW. A printed object sitting on a surface, not a UI panel. Tighter and
	 * darker than the UI shadows because it reads as the edge of a physical
	 * book rather than elevation.
	 *
	 * Expressed as filter functions, not box-shadow. Catalogue covers are
	 * letterboxed inside a fixed frame with object-fit: contain, and box-shadow
	 * would trace that frame rather than the cover inside it, drawing a
	 * rectangle in mid air. drop-shadow follows the pixels actually painted.
	 */
	--sj-shadow-cover: none;
	--sj-shadow-cover-hover: none;

	/* ---------------------------------------------------------------
	 * Motion
	 * --------------------------------------------------------------- */

	--sj-duration-fast: 150ms;
	--sj-duration: 250ms;
	--sj-ease: cubic-bezier(0.2, 0, 0, 1);

	/* ---------------------------------------------------------------
	 * Focus
	 *
	 * NEW. The live site relies on browser defaults, which Elementor
	 * suppresses in several places.
	 * --------------------------------------------------------------- */

	--sj-focus-width: 2px;
	--sj-focus-color: var(--sj-color-navy);
	--sj-focus-offset: 2px;

	/* ---------------------------------------------------------------
	 * Z index
	 * --------------------------------------------------------------- */

	--sj-z-dropdown: 100;
	--sj-z-sticky: 200;
	--sj-z-overlay: 300;
	--sj-z-modal: 400;

	/**
	 * NEW. Above Elementor.
	 *
	 * The Elementor frontend uses z-index 999999 on its own overlays and sticky
	 * elements. Anything of ours that has to sit over the whole page, which is
	 * the mini-cart drawer and nothing else so far, has to clear that or it
	 * opens invisibly behind the header.
	 */
	--sj-z-drawer: 1000000;
	--sj-z-toast: 500;
}

/**
 * Breakpoints
 *
 * Custom properties cannot be used in media query conditions, so these are
 * documented here and written as literals. Author mobile first, min-width.
 *
 *   sm   30rem   480px
 *   md   48rem   768px
 *   lg   64rem  1024px
 *   xl   80rem  1280px
 *
 * The live site also carries stray breakpoints at 450, 479, 660, 991 and
 * 1279px from plugins and one-off CSS. Do not add to them.
 */

/**
 * Base defaults
 */

body {
	font-family: var(--sj-font);
	font-size: var(--sj-text-sm);
	font-weight: var(--sj-weight-regular);
	line-height: var(--sj-leading-body);
	letter-spacing: var(--sj-tracking-body);
	color: var(--sj-color-ink-body);
	background-color: var(--sj-color-surface);
}

/**
 * Heading system
 *
 * h1 is uppercase. Every other heading is lowercase. All Open Sans.
 *
 * Choose the heading LEVEL by document structure. Where a heading needs to
 * look like a different level, apply the matching .sj-h* class to it rather
 * than changing the tag.
 */

:where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--sj-font);
	color: var(--sj-color-navy);
	margin-block: 0;
}

h1,
.sj-h1.sj-h1 {
	font-size: var(--sj-text-3xl);
	font-weight: var(--sj-weight-black);
	line-height: var(--sj-leading-display);
	letter-spacing: var(--sj-tracking-caps);
	text-transform: uppercase;
}

h2,
.sj-h2.sj-h2 {
	font-size: var(--sj-text-2xl);
	font-weight: var(--sj-weight-bold);
	line-height: var(--sj-leading-tight);
	letter-spacing: var(--sj-tracking-display);
	text-transform: none;
}

h3,
.sj-h3.sj-h3 {
	font-size: var(--sj-text-xl);
	font-weight: var(--sj-weight-bold);
	line-height: var(--sj-leading-snug);
	letter-spacing: var(--sj-tracking-heading);
	text-transform: none;
}

h4,
.sj-h4.sj-h4 {
	font-size: var(--sj-text-lg);
	font-weight: var(--sj-weight-bold);
	line-height: var(--sj-leading-snug);
	letter-spacing: var(--sj-tracking-heading);
	text-transform: none;
}

h5,
.sj-h5.sj-h5 {
	font-size: var(--sj-text-md);
	font-weight: var(--sj-weight-semibold);
	line-height: var(--sj-leading-normal);
	letter-spacing: var(--sj-tracking-heading);
	text-transform: none;
}

h6,
.sj-h6.sj-h6 {
	font-size: var(--sj-text-xs);
	font-weight: var(--sj-weight-semibold);
	line-height: var(--sj-leading-normal);
	letter-spacing: var(--sj-tracking-none);
	text-transform: none;
}

/**
 * Eyebrow. The 14px uppercase label used above headings and for product
 * categories. Not a heading, so it never takes a heading tag.
 */

.sj-eyebrow {
	font-size: var(--sj-text-2xs);
	font-weight: var(--sj-weight-bold);
	line-height: var(--sj-leading-normal);
	letter-spacing: var(--sj-tracking-caps);
	text-transform: uppercase;
	color: var(--sj-color-sage-text);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--sj-focus-width) solid var(--sj-focus-color);
	outline-offset: var(--sj-focus-offset);
}

@media (prefers-reduced-motion: reduce) {

	:root {
		--sj-duration-fast: 1ms;
		--sj-duration: 1ms;
	}

	*,
	*::before,
	*::after {
		animation-duration: 1ms !important; /* overrides third party inline animation */
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		scroll-behavior: auto !important;
	}
}