/* ==========================================================================
   Design tokens and element defaults
   ========================================================================== */

/*
 * Tokens adapted from the sister storefront named in docs/visual-language.md,
 * so this reads as a related shop rather than an unrelated site. The other
 * business is named in the docs and not here: this file is served to every
 * visitor, and the only business a public asset should name is this one.
 *
 * Taken from that site's live CSS custom properties rather than sampled by eye:
 *
 *   --ast-global-color-0  #060097   deep indigo, primary
 *   --ast-global-color-1  #c10fff   magenta, accent
 *   --ast-global-color-2  #1e293b   headings
 *   --ast-global-color-3  #67768e   muted text
 *   --ast-global-color-4  #f9f6fe   tinted surface
 *   --ast-global-color-6  #F2F5F7   subtle surface
 *   --ast-global-color-7  #ffcd57   amber highlight
 *
 * Typography is theirs too: Plus Jakarta Sans for headings at weight 600,
 * Inter for body and buttons. Radii there run 10-16px; ours follow.
 *
 * What is deliberately NOT carried over is commerce messaging. Their payment
 * methods, their free-shipping threshold and their delivery estimates belong
 * to a different store with different rules; this one takes all of that from
 * its own country engine. Branding is inherited, business logic is not.
 *
 * this store's own hue. The reference store is anchored on a blue-leaning
 * indigo with a warm yellow highlight; this one is anchored on violet with a
 * cyan highlight. Same family -- dark saturated primary, one bright accent,
 * violet-tinted neutrals -- and not mistakable for each other.
 *
 * These values are the defaults. Cod_Design holds the same set as editable
 * tokens and prints only what an operator has actually changed, so the two
 * must agree: a default that differs here is a colour that silently changes
 * the first time someone opens the design screen and presses save.
 */
:root {
	/* Primary: the violet everything is built on. */
	--cod-navy: #170b2e;
	--cod-navy-soft: #261348;
	--cod-blue: #6d28d9;
	--cod-blue-dark: #5b21b6;

	/*
	 * Secondary and highlight. The cyan is a graphic accent only -- at 1.8:1
	 * on white it is not a text colour, and nothing here uses it as one.
	 */
	--cod-magenta: #c026d3;
	--cod-accent: #22d3ee;

	/*
	 * The dark surfaces: the hero scrim, the footer and the age gate. The
	 * scrim is an rgb triplet rather than a hex so it can carry an alpha,
	 * which a custom property holding "#170b2e" cannot.
	 */
	--cod-scrim-rgb: 23, 11, 46;
	--cod-on-dark: #ffffff;
	--cod-on-dark-soft: #cfc4ea;

	--cod-red: #e11d48;
	--cod-green: #059669;

	--cod-ink: #1b1630;
	--cod-ink-soft: #4a4363;
	--cod-muted: #6b6486;
	--cod-line: #e6e2f0;
	--cod-surface: #ffffff;
	--cod-surface-soft: #f8f5fe;
	--cod-surface-deep: #f1edfa;

	/* Softer than before, matching the reference's 10-16px range. */
	--cod-radius-sm: 8px;
	--cod-radius: 12px;
	--cod-radius-lg: 16px;
	--cod-radius-pill: 999px;

	--cod-shadow-sm: 0 1px 2px rgba(23, 11, 46, .06);
	--cod-shadow: 0 6px 20px rgba(23, 11, 46, .09);
	--cod-shadow-lg: 0 16px 40px rgba(23, 11, 46, .16);

	--cod-wrap: 1240px;
	--cod-gutter: 16px;

	/*
	 * The reference's pairing. The system stack stays as the fallback so the
	 * page is readable before the webfont arrives -- and stays readable if it
	 * never does.
	 */
	--cod-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--cod-font-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	/*
	 * The floor is 0.7rem, not 0.68rem: at 320px the smaller value computes
	 * to 10.88px, and body copy under 11px is the one type-size complaint a
	 * responsive audit is right about. The top of the range is unchanged, so
	 * nothing looks different on a laptop.
	 */
	--cod-step--2: clamp(.7rem, .68rem + .1vw, .74rem);
	--cod-step--1: clamp(.78rem, .76rem + .1vw, .84rem);
	--cod-step-0: clamp(.94rem, .91rem + .14vw, 1rem);
	--cod-step-1: clamp(1.06rem, 1rem + .3vw, 1.2rem);
	--cod-step-2: clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
	--cod-step-3: clamp(1.5rem, 1.3rem + .9vw, 2rem);
	--cod-step-4: clamp(1.85rem, 1.5rem + 1.6vw, 2.75rem);
}

/* Headings take the display face at the reference's weight. */
h1, h2, h3, h4, h5, h6,
.cod-hero__title,
.cod-section__title {
	font-family: var(--cod-font-heading);
	font-weight: 600;
	color: var(--cod-ink);
	letter-spacing: -.01em;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--cod-font);
	font-size: var(--cod-step-0);
	line-height: 1.6;
	color: var(--cod-ink);
	background: var(--cod-surface);
	/* Never allow a stray wide element to scroll the whole page sideways. */
	overflow-x: hidden;
}

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

a {
	color: var(--cod-blue);
	text-decoration: none;
}

a:hover,
a:focus-visible {
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	line-height: 1.2;
	color: var(--cod-navy);
	font-weight: 700;
	text-wrap: balance;
}

h1 { font-size: var(--cod-step-4); }
h2 { font-size: var(--cod-step-3); }
h3 { font-size: var(--cod-step-2); }
h4 { font-size: var(--cod-step-1); }

p { margin: 0 0 1em; }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }

table {
	width: 100%;
	border-collapse: collapse;
}

th, td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid var(--cod-line);
}

input, select, textarea, button {
	font: inherit;
	color: inherit;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--cod-line);
	border-radius: var(--cod-radius-sm);
	background: var(--cod-surface);
	/* 16px minimum prevents iOS Safari from zooming the viewport on focus. */
	font-size: 16px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--cod-blue);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cod-skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100001;
	width: auto;
	height: auto;
	padding: 10px 16px;
	clip: auto;
	background: var(--cod-navy);
	color: #fff;
	border-radius: var(--cod-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}


/*
 * Room for the sticky header, for anything the browser scrolls to.
 *
 * Without it a jump link, a focused form control or a scripted scrollIntoView
 * leaves its target underneath the header -- visible in the layout, covered on
 * screen, and unclickable. The height is published by theme.js; the fallback
 * covers the moment before the script runs.
 */
html { scroll-padding-top: calc(var(--cod-header-height, 76px) + 1rem); }