/*
 * FLEXD — base layer
 * ---------------------------------------------------------------------------
 * Reset, the M3 type scale as utilities, the editorial display type, and the
 * base primitives (buttons, underline field, chip, hairline).
 *
 * Values come from docs/DESIGN_SYSTEM.md, which was read off the Figma file.
 * The editorial layer wins over M3 defaults for anything bespoke.
 *
 * Google Sans Flex is self-hosted as a variable font (wght 100..900) — see
 * fonts.css, which also patches in the ৳ glyph the family doesn't ship.
 */

/* --- Reset ------------------------------------------------------------- */

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

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

body {
	margin: 0;
	background: var(--color-surface);
	color: var(--color-on-surface);
	font-family: var(--font-text);
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.5px;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

a {
	color: inherit;
}

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

/* Accessibility: the focus ring must be visible on paper AND on the dark bands
   (DESIGN_SYSTEM.md 7). Lime on both is legible because it is a ring, not text. */
:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* --- M3 type scale (15 styles, sizes in px per the Figma text styles) ---- */

.t-display-large  { font-family: var(--font-display); font-weight: 400; font-size: 57px; line-height: 64px; letter-spacing: -0.25px; }
.t-display-medium { font-family: var(--font-display); font-weight: 400; font-size: 45px; line-height: 52px; letter-spacing: 0; }
.t-display-small  { font-family: var(--font-display); font-weight: 400; font-size: 36px; line-height: 44px; letter-spacing: 0; }

.t-headline-large  { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 40px; letter-spacing: 0; }
.t-headline-medium { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 36px; letter-spacing: 0; }
.t-headline-small  { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 32px; letter-spacing: 0; }

.t-title-large  { font-weight: 400; font-size: 22px; line-height: 28px; letter-spacing: 0; }
.t-title-medium { font-weight: 500; font-size: 16px; line-height: 24px; letter-spacing: 0.15px; }
.t-title-small  { font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: 0.1px; }

.t-body-large  { font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: 0.5px; }
.t-body-medium { font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: 0.25px; }
.t-body-small  { font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: 0.4px; }

.t-label-large  { font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: 0.1px; }
.t-label-medium { font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0.5px; }
.t-label-small  { font-weight: 500; font-size: 11px; line-height: 16px; letter-spacing: 0.5px; }

/* --- Editorial display type --------------------------------------------
   NOT on the token scale. Hairline (wght 100), lowercase, tight negative
   tracking, line-height ~0.95. Scales fluidly between the mobile and desktop
   sizes recorded in Figma. */

.display {
	font-family: var(--font-display);
	font-weight: 100;
	font-variation-settings: "wght" 100;
	text-transform: lowercase;
	letter-spacing: -0.03em;
	line-height: 0.95;
	margin: 0;
	/* section headlines: 40px mobile -> 120px desktop */
	font-size: clamp(2.5rem, 1.2rem + 6.5vw, 7.5rem);
}

/* Home hero wordmark: 100px mobile -> 232px desktop */
.display--hero {
	font-size: clamp(6.25rem, 1rem + 26vw, 14.5rem);
	letter-spacing: -0.04em;
	line-height: 1;
}

/* --- Tracked-caps labels: eyebrows, NN section numbers, nav, filter pills,
   spec rows. Label/Small–Medium, uppercase, +6% to +10% tracking. --------- */

.eyebrow {
	font-weight: 500;
	font-size: 11px;
	line-height: 16px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-outline);
}

.eyebrow--strong {
	color: var(--color-on-surface-variant);
}

/* --- Hairline rule ------------------------------------------------------ */

.rule {
	border: 0;
	border-top: 1px solid var(--color-outline-variant);
	margin: 0;
}

/* --- Buttons ------------------------------------------------------------
   Radius lives at the extremes only (CLAUDE.md rule 3):
     .btn            sharp (0) — the cart/checkout/PDP action buttons
     .btn--pill      full (9999) — the hero / marketing CTA pill
   Lime is only ever a FILL with On Primary text on it, never lime text on
   paper (it fails contrast). */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-6);
	border: 1px solid transparent;
	border-radius: var(--radius-none);
	background: transparent;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 120ms ease,
		color 120ms ease,
		border-color 120ms ease,
		transform 150ms ease;
}

/* A 1px lift on hover, pressed flat on click — enough to feel like a control
   without a shadow (CLAUDE.md ban list). */
.btn:hover {
	transform: translateY(-1px);
}

.btn:active {
	transform: translateY(0);
}

.btn--lime {
	background: var(--color-primary);
	color: var(--color-on-primary);
}

.btn--lime:hover {
	background: var(--color-inverse-primary);
}

.btn--outline {
	border-color: var(--color-on-surface);
	color: var(--color-on-surface);
}

.btn--outline:hover {
	background: var(--color-on-surface);
	color: var(--color-surface);
}

.btn--pill {
	border-radius: var(--radius-full);
	background: var(--color-primary);
	color: var(--color-on-primary);
	padding: var(--space-4) var(--space-7);
}

.btn--pill:hover {
	background: var(--color-inverse-primary);
}

.btn[disabled],
.btn[aria-disabled="true"] {
	opacity: 0.38;
	pointer-events: none;
}

/* --- Chip / tag: full radius, monochrome. Used for category tags, filter
   pills and the PDP scent-note chips. ------------------------------------ */

.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-outline-variant);
	border-radius: var(--radius-full);
	background: transparent;
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
	white-space: nowrap;
}

.chip--active {
	border-color: var(--color-on-surface);
	color: var(--color-on-surface);
}

/* The active-nav / active-filter lime dot — one of the few sanctioned uses
   of the accent. */
.chip--active::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: var(--radius-full);
	background: var(--color-primary);
}

/* --- Underline field: bottom border only, never a filled M3 box. -------- */

.field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.field__label {
	font-weight: 500;
	font-size: 11px;
	line-height: 16px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-outline);
}

.field__input {
	width: 100%;
	padding: var(--space-2) 0;
	border: 0;
	border-bottom: 1px solid var(--color-outline-variant);
	border-radius: var(--radius-none);
	background: transparent;
	font-size: 16px; /* 16px avoids iOS zoom-on-focus */
	line-height: 24px;
	appearance: none;
}

.field__input:focus {
	outline: none;
	border-bottom-color: var(--color-primary);
	border-bottom-width: 2px;
	padding-bottom: calc(var(--space-2) - 1px);
}

.field--error .field__input {
	border-bottom-color: var(--color-error);
}

.field__error {
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.4px;
	color: var(--color-error);
}

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

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

/* Full-bleed bands (masthead, dark sections, contact-sheet grid) escape the
   gutter and run edge to edge. */
.bleed {
	width: 100%;
}

/* Inverted band: the dark counterpart to paper. */
.inverted {
	background: var(--color-inverse-surface);
	color: var(--color-inverse-on-surface);
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

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

@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;
	}
}