/* ==========================================================================
   base.css — Genva Interior

   Design tokens that theme.json cannot hold, plus the global defaults.

   Colours, font sizes, spacing steps and shadows live in theme.json, because
   the editor needs them as presets. Line heights, letter spacing, radii and
   the header height have no preset home, so they are declared here.

   The variable names are the ones the mock uses. Section stylesheets are
   ported from the mock as they are, without renaming anything.
   ========================================================================== */

:root {

	/* --- Colour ---------------------------------------------------------
	   Six of these are theme.json presets, so a style variation that changes
	   the palette flows through to the components. The rest are neutrals the
	   editor never exposes, and carry their value directly. */

	--surface:                  var(--wp--preset--color--base);
	--surface-container-lowest: var(--wp--preset--color--card);
	--surface-container-low:    var(--wp--preset--color--surface);
	--surface-container:        #eceef0;
	--surface-container-high:   #e6e8ea;
	--surface-dim:              #d8dadc;
	--surface-tint:             #565e74;

	--on-surface:               var(--wp--preset--color--contrast);
	--on-surface-variant:       var(--wp--preset--color--secondary);
	--outline:                  #76777d;
	--outline-variant:          var(--wp--preset--color--line);
	--outline-dim:              var(--wp--preset--color--line-dim);

	--primary:                  #000000;
	--on-primary:               #ffffff;
	--primary-container:        var(--wp--preset--color--primary);
	--on-primary-container:     #7c839b;
	--inverse-primary:          #bec6e0;

	--secondary:                    var(--wp--preset--color--accent);
	--on-secondary:                 #ffffff;
	--secondary-container:          var(--wp--preset--color--accent-bright);
	--on-secondary-container:       #663500;

	/* The one call to action that has to win the eye on a phone. The accent is
	   a brown once it is a filled block, and accent-bright is too light to take
	   white text — white on it reads at 2.2:1. This sits between them: red
	   enough to separate from the accent, dark enough for white at 5.18:1. */
	--secondary-vivid:              var(--wp--preset--color--accent-vivid);
	--on-secondary-vivid:           #ffffff;

	/* Translucent films laid over a surface: the banding down the price list,
	   the free-of-charge row, and the stamp on the hero photo. They were
	   written straight into their own files as rgba() literals, which meant
	   they stayed light when everything under them turned dark and the text
	   on them became unreadable. Declared here so each has a dark partner. */
	--film-band:        rgba(242, 244, 246, 0.6);
	--film-free:        rgba(255, 220, 195, 0.2);
	--film-free-hover:  rgba(255, 220, 195, 0.3);
	--film-free-wide:   rgba(255, 220, 195, 0.4);
	--film-stamp:       rgba(255, 255, 255, 0.95);
	--secondary-fixed:              #ffdcc3;
	--on-secondary-fixed:           #2f1500;
	--on-secondary-fixed-variant:   #6e3900;

	/* --- Type -----------------------------------------------------------
	   Sizes point at the theme.json presets. Line height and letter spacing
	   cannot be attached to a font size preset, so they are paired here.

	   Three steps share the 16px size and differ only in line height, which
	   is why they are separate names rather than one token. */

	--font-heading: var(--wp--preset--font-family--sans);
	--font-body:    var(--wp--preset--font-family--sans);
	--font-number:  var(--wp--preset--font-family--number);

	/* The two heading presets are fluid in theme.json, so they are a clamp()
	   that slides with the viewport rather than a fixed pixel value. A line
	   height in px cannot follow that: it stayed at the desktop figure while
	   the text shrank, and at one point the hero ran 48px of type on a 44px
	   line and the rows sat on top of each other. Unitless, it is a multiple
	   of whatever size the clamp lands on, so the pair can never separate.
	   1.4 is a little roomier than the 1.33 the reference used. */

	--display-hero-size:    var(--wp--preset--font-size--display);
	--display-hero-line:    1.4;
	--display-hero-track:   -0.01em;

	--display-mobile-size:  var(--wp--preset--font-size--displaymobile);
	--display-mobile-line:  44px;
	--display-mobile-track: -0.01em;

	--headline-xl-size:     var(--wp--preset--font-size--xxlarge);
	--headline-xl-line:     1.4;
	--headline-xl-track:    -0.01em;

	--headline-mobile-size: var(--wp--preset--font-size--xlarge);
	--headline-mobile-line: 36px;
	--headline-mobile-track: 0;

	--headline-lg-size:     var(--wp--preset--font-size--large);
	--headline-lg-line:     36px;
	--headline-lg-track:    0;

	--headline-md-size:     var(--wp--preset--font-size--medium);
	--headline-md-line:     30px;
	--headline-md-track:    0.01em;

	--headline-sm-size:     var(--wp--preset--font-size--small);
	--headline-sm-line:     28px;
	--headline-sm-track:    0.01em;

	--body-lg-size:         var(--wp--preset--font-size--body);
	--body-lg-line:         28px;
	--body-lg-track:        0.02em;

	/* The five steps below are a point larger than the reference, which ran on
	   15px, 13px and 11px. 11px is under the minimum this project allows, and
	   the preset scale has no 13px or 15px to drop back to, so the sizes went
	   up. The line heights did not follow at the time, which left the small
	   text noticeably tighter than the reference: body ran 1.63 against 1.73,
	   the small caps 1.33 against 1.45. These restore the reference's ratios
	   at the larger sizes.

	   Tracking is left alone on purpose. Every value here is in em, so it is
	   already a proportion of the font size and scaled with it. */

	--body-md-size:         var(--wp--preset--font-size--body);
	--body-md-line:         28px;
	--body-md-track:        0.02em;

	--body-sm-size:         var(--wp--preset--font-size--note);
	--body-sm-line:         24px;
	--body-sm-track:        0.01em;

	--label-lg-size:        var(--wp--preset--font-size--body);
	--label-lg-line:        21px;
	--label-lg-track:       0.02em;

	--label-md-size:        var(--wp--preset--font-size--note);
	--label-md-line:        19px;
	--label-md-track:       0.03em;

	--label-sm-size:        var(--wp--preset--font-size--label);
	--label-sm-line:        17px;
	--label-sm-track:       0.05em;

	/* --- Spacing ---------------------------------------------------------
	   Aliases onto the theme.json steps, so the mock's names keep working. */

	--space-2xs: var(--wp--preset--spacing--10);
	--space-xs:  var(--wp--preset--spacing--20);
	--space-sm:  var(--wp--preset--spacing--30);
	--space-md:  var(--wp--preset--spacing--40);
	--space-lg:  var(--wp--preset--spacing--50);
	--space-xl:  var(--wp--preset--spacing--60);
	--space-2xl: var(--wp--preset--spacing--70);
	--space-3xl: var(--wp--preset--spacing--80);
	--space-4xl: var(--wp--preset--spacing--90);

	--gutter: var(--wp--preset--spacing--40);

	/* Two widths on purpose: the outer frame carries the header and the
	   footer, the reading width carries everything inside a page. Both come
	   from theme.json layout, so the editor's wide alignment matches. */
	--container-max: var(--wp--style--global--wide-size);
	--content-max:   var(--wp--style--global--content-size);

	/* --- Shape ----------------------------------------------------------- */

	--rounded-sm:   0.125rem;
	--rounded:      0.25rem;
	--rounded-md:   0.375rem;
	--rounded-lg:   0.5rem;
	--rounded-xl:   0.75rem;
	--rounded-full: 9999px;

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

	--shadow-xs: var(--wp--preset--shadow--xs);
	--shadow-sm: var(--wp--preset--shadow--sm);
	--shadow-md: var(--wp--preset--shadow--md);

	/* --- Header ------------------------------------------------------------
	   64px on the phone, 96px from the tablet up. Anything that has to clear
	   the fixed header reads this, so the two never drift apart. */

	--header-height: 64px;
}

@media (width >= 768px) {

	:root {
		--gutter: var(--wp--preset--spacing--50);
	}
}

@media (width >= 782px) {

	:root {
		--header-height: 96px;
	}
}

/* ==========================================================================
   Dark mode

   Driven only by the .is-dark class the toggle puts on <html>. It never
   follows prefers-color-scheme, so the toggle stays the single source of
   truth and cannot fight the style variations.

   Three layers set these tokens, and they have to land in this order:

     :root                          the light defaults, above
     :root:root                     a style variation, from styles/*.json
     :root.is-dark.is-dark          dark mode, here
     :root.is-dark.is-dark.is-dark  a variation's own dark colours

   The repeated selectors are there to force that order by specificity alone. A
   plain .is-dark ties with :root at 0-1-0, which would leave the winner to
   whichever stylesheet happened to load last — and the global styles a
   variation produces are printed separately from this file, so that order is
   not something this file can rely on.

   Every pair was checked against WCAG 2.1 AA with _verify/contrast.php. The
   lowest in the dark set is 5.77:1, against the 4.5:1 required.
   ========================================================================== */

:root.is-dark.is-dark {
	--surface:                  #14181b;
	--surface-container-lowest: #1e2427;
	--surface-container-low:    #1b2023;
	--surface-container:        #22282c;
	--surface-container-high:   #2a3136;
	--surface-dim:              #0e1113;
	--surface-tint:             #8d95ad;

	--on-surface:               #eff1f3;
	--on-surface-variant:       #b3b9bf;
	--outline:                  #8b8d93;
	--outline-variant:          #3a424a;
	--outline-dim:              #2f363d;

	--primary:                  #ffffff;
	--on-primary:               #ffffff;
	--primary-container:        #0d1220;
	--on-primary-container:     #9aa2b8;
	--inverse-primary:          #c9d0e4;

	--secondary:                    #e0913f;
	--on-secondary:                 #2a1600;
	--secondary-container:          #cf8434;
	--on-secondary-container:       #2a1600;

	/* Dark mode turns the warm tones up and the text dark, as the rest of this
	   block already does, so #C2410C would sink into the surface here. */
	--secondary-vivid:              #ff7a45;
	--on-secondary-vivid:           #2a1600;

	--film-band:        rgba(255, 255, 255, 0.05);
	--film-free:        rgba(74, 53, 32, 0.55);
	--film-free-hover:  rgba(74, 53, 32, 0.75);
	--film-free-wide:   rgba(74, 53, 32, 0.65);
	--film-stamp:       rgba(30, 36, 39, 0.95);

	/* Core colours every heading with `h1…h6{color:var(--wp--preset--color--
	   contrast)}` in its global styles, and a preset does not change with the
	   toggle. Section CSS happens to recolour 26 of the 27 headings on the
	   front page, so only one showed the fault — but any heading added later
	   would land dark on dark. Flipping the preset itself fixes the class of
	   bug rather than the one instance. */
	--wp--preset--color--contrast: #eff1f3;

	/* The accent preset is deliberately NOT flipped here. It is the button fill
	   as well as the link colour, and lightening it put white button labels at
	   2.53:1. Links are dealt with on their own, below. */
	--secondary-fixed:              #4a3520;
	--on-secondary-fixed:           #ffd9b8;
	--on-secondary-fixed-variant:   #f0a95c;
}

/* The page ground is painted by theme.json in light mode. In dark mode the
   preset no longer describes it, so it is restated from the token. */
.is-dark body {
	background-color: var(--surface);
	color: var(--on-surface);
}

/* ==========================================================================
   Page shell

   The reading width and the section rhythm every template and every section
   pattern relies on. The header and the footer deliberately do not use
   .container: they take the outer frame instead, so the navigation and the
   shop details can spread on a wide screen.
   ========================================================================== */

.container {
	max-width: var(--content-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section {
	width: 100%;
	padding-block: var(--space-3xl);
}

.section--tall {
	padding-block: var(--space-4xl);
}

.section--surface       { background: var(--surface); }
.section--container-low { background: var(--surface-container-low); }

@media (width < 782px) {

	.section,
	.section--tall {
		padding-block: var(--space-lg);
	}
}

.section-intro {
	max-width: 48rem;
	margin-bottom: var(--space-2xl);
}

.section-intro--short {
	margin-bottom: var(--space-xl);
}

.section-intro h2 {
	color: var(--on-surface);
}

.section-intro p {
	color: var(--on-surface-variant);
	margin-top: var(--space-xs);
}

/* Head that puts the lead to the right on wider screens. */
.section-head {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-bottom: var(--space-2xl);
}

/* The two halves are laid out by flexbox, so core's flow margin between them
   would only push the lead out of line. */
.section-head > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.section-head > p {
	color: var(--on-surface-variant);
	margin-top: 0.5rem;
}

.section-intro > *,
.section-head__title > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

@media (width >= 768px) {

	.section-head {
		flex-direction: row;
		align-items: flex-end;
	}

	.section-head > p {
		margin-top: 0;
	}
}

@media (width < 782px) {

	.section-intro,
	.section-intro--short,
	.section-head {
		margin-bottom: var(--space-md);
	}
}

/* Every eyebrow also carries .t-label-sm, which sets its own tracking. In the
   mock the two sat the other way round — .eyebrow came after the type scale,
   so its wider 0.1em won. Porting moved the type scale to the bottom of this
   file and the rule quietly stopped having any effect: the small caps were
   rendering at 0.05em. `:root` puts the wide tracking back in charge without
   moving either block. */
:root .eyebrow {
	display: block;
	color: var(--secondary);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 0.25rem;
}

/* ==========================================================================
   Type scale utilities

   A font size preset can only carry a size, so every step also needs its line
   height and letter spacing. These classes pair the three, and the patterns
   apply them alongside the fontSize attribute. Ported from the mock with the
   same names, so the section stylesheets move over unchanged.
   ========================================================================== */

.t-display-hero {
	font-family: var(--font-heading);
	font-size: var(--display-hero-size);
	line-height: var(--display-hero-line);
	letter-spacing: var(--display-hero-track);
	font-weight: 700;
}

.t-headline-xl {
	font-family: var(--font-heading);
	font-size: var(--headline-xl-size);
	line-height: var(--headline-xl-line);
	letter-spacing: var(--headline-xl-track);
	font-weight: 700;
}

.t-headline-lg {
	font-family: var(--font-heading);
	font-size: var(--headline-lg-size);
	line-height: var(--headline-lg-line);
	font-weight: 600;
}

.t-headline-md {
	font-family: var(--font-heading);
	font-size: var(--headline-md-size);
	line-height: var(--headline-md-line);
	letter-spacing: var(--headline-md-track);
	font-weight: 600;
}

.t-headline-sm {
	font-family: var(--font-heading);
	font-size: var(--headline-sm-size);
	line-height: var(--headline-sm-line);
	letter-spacing: var(--headline-sm-track);
	font-weight: 600;
}

.t-body-lg {
	font-family: var(--font-body);
	font-size: var(--body-lg-size);
	line-height: var(--body-lg-line);
	letter-spacing: var(--body-lg-track);
}

.t-body-md {
	font-family: var(--font-body);
	font-size: var(--body-md-size);
	line-height: var(--body-md-line);
	letter-spacing: var(--body-md-track);
}

.t-body-sm {
	font-family: var(--font-body);
	font-size: var(--body-sm-size);
	line-height: var(--body-sm-line);
	letter-spacing: var(--body-sm-track);
}

.t-label-lg {
	font-family: var(--font-heading);
	font-size: var(--label-lg-size);
	line-height: var(--label-lg-line);
	letter-spacing: var(--label-lg-track);
	font-weight: 600;
}

.t-label-md {
	font-family: var(--font-heading);
	font-size: var(--label-md-size);
	line-height: var(--label-md-line);
	letter-spacing: var(--label-md-track);
	font-weight: 600;
}

.t-label-sm {
	font-family: var(--font-heading);
	font-size: var(--label-sm-size);
	line-height: var(--label-sm-line);
	letter-spacing: var(--label-sm-track);
	font-weight: 700;
}

/* Numbers, prices and lead times are set in Inter, which has the tighter
   figures the reference uses. Japanese text never reaches this class. */
.t-number {
	font-family: var(--font-number);
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Global defaults

   Only what theme.json cannot express. Everything visual belongs to a
   section stylesheet.
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* A visible focus ring is required and must never be removed. :focus-visible
   keeps it off mouse clicks, so it costs nothing to sighted mouse users. */
:focus-visible {
	outline: 2px solid var(--secondary);
	outline-offset: 2px;
}

/* Core colours every anchor with `a:where(:not(.wp-element-button))` set to
   the accent preset, at specificity 0-0-1. In dark mode that stays the light
   palette's brown and reads at 2.76:1 on the dark surface. Section CSS
   recolours the links it knows about, which left the skip link — the first
   control a keyboard user meets — as the one still failing.

   Two wider attempts were made first and both did damage. Flipping the accent
   preset lightened the button fills and dropped their white labels to 2.53:1.
   Catching every `a` instead reached inside components that set their own
   colours — the dock's quote label turned accent-on-accent at 1.02:1. The
   fault was only ever on the one link nothing else styles, so that is all
   this touches. */
:root.is-dark.is-dark .skip-link {
	color: var(--secondary);
}

.skip-link:focus {
	background: var(--surface-container-lowest);
	color: var(--on-surface);
	box-shadow: var(--shadow-sm);
}

/* Anchors land below the fixed header rather than underneath it. */
:target {
	scroll-margin-top: calc(var(--header-height) + var(--space-md));
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}