/**
 * FLUXX — design tokens.
 *
 * The single source of design truth, implementing docs/design-system.md. Every
 * value the design depends on is declared exactly once, here. No other
 * stylesheet in this theme may contain a raw hex, font size, duration or
 * breakpoint-specific magic number.
 *
 * The values are measured from the reference site's compiled stylesheets, not
 * estimated. Where this file deliberately departs from the reference, the
 * comment says so and docs/design-system.md explains why.
 */

:root {

	/* ------------------------------------------------------------------ ink */
	--fx-ink: #0B0B0B;              /* never pure black */
	--fx-ink-hover: #262626;
	--fx-paper: #FFFFFF;
	--fx-surface: #F9F9F9;
	--fx-surface-muted: #F5F5F5;
	--fx-media-ground: #F3F3F3;     /* sits behind every product image */

	/* ----------------------------------------------------------- the warmth */
	/* One warm note against the near-black. Footer, announcement bar, chips. */
	--fx-sand: #F7EEE8;

	/* ---------------------------------------------------------------- accent */
	--fx-accent: #E54B29;
	--fx-accent-alt: #F75C39;       /* active navigation icon */
	--fx-accent-soft: #E16E50;

	/* ----------------------------------------------------------------- state */
	--fx-sale-bg: #8F1717;          /* discount badge, white text on it */
	--fx-sale-fg: #FFFFFF;
	--fx-promo-bg: #F5A593;         /* promo badge, ink text on it */
	--fx-success: #23753D;
	--fx-danger: #E53935;

	/* ------------------------------------------------------------------ text */
	--fx-text: var(--fx-ink);
	/*
	 * DEPARTURE: the reference uses #999999 here, which is about 2.8:1 on white
	 * and fails WCAG AA. This is 5.6:1 and reads almost identically.
	 */
	--fx-text-muted: #626161;
	--fx-text-disabled: #B8B8B8;
	--fx-text-on-dark: #FFFFFF;

	/* --------------------------------------------------------------- borders */
	--fx-border: rgba(0, 0, 0, .1);     /* header, dividers */
	--fx-border-control: #B8B8B8;       /* size chips, inputs at rest */
	--fx-border-strong: #D9D9D9;
	--fx-scrim: rgba(0, 0, 0, .7);
	--fx-scrim-blur: 2px;

	/* ------------------------------------------------------------ typography */
	--fx-font: "Inter", "Inter Fallback", -apple-system, "Segoe UI", Arial, sans-serif;

	/* Inter sets wider than the Helvetica it stands in for. This corrects it. */
	--fx-tracking-body: -0.01em;
	--fx-tracking-nav: 0.05em;
	--fx-tracking-cta: 0.1em;
	--fx-tracking-badge: 0.04em;

	--fx-weight-light: 300;
	--fx-weight-regular: 400;
	--fx-weight-medium: 500;
	--fx-weight-bold: 700;
	--fx-weight-black: 900;

	/* ---------------------------------------------------------------- layout */
	--fx-shell-mobile: 480px;       /* the app-shell column */
	--fx-page-max: 1500px;
	--fx-gutter: 25px;
	--fx-gutter-md: 40px;
	--fx-header-h: 58px;
	--fx-header-h-md: 86px;
	--fx-announce-h: 24px;

	/* Grid: deliberately dense and almost touching. Editorial, not roomy. */
	--fx-grid-gap-x: 8px;
	--fx-grid-gap-y: 2px;
	--fx-product-ratio: 3 / 4;

	/* ------------------------------------------------------- shape and depth */
	/* Sharp corners are a decision here, not an oversight. */
	--fx-radius-none: 0;            /* buttons, inputs, cards, media, size chips */
	--fx-radius-badge: 2px;
	--fx-radius-pill: 8px;          /* filter and sort pills only */
	--fx-radius-panel: 12px;        /* modals; sheets round the top only */
	--fx-radius-round: 9999px;      /* avatars */

	--fx-shadow-card: 0 2px 10px rgba(0, 0, 0, .06);
	--fx-shadow-panel: 0 0 12px rgba(0, 0, 0, .08);
	/* Throws upward, under the sticky mobile action bar. The signature. */
	--fx-shadow-sticky: 4px -4px 25px rgba(0, 0, 0, .08);

	/* ------------------------------------------- control heights, four steps */
	--fx-control-sm: 40px;          /* dropdowns, tabs, steppers */
	--fx-control-md: 44px;          /* size chips, the filter rail */
	--fx-control-lg: 45px;          /* select rows */
	--fx-control-cta: 54px;         /* the primary CTA */

	/* ---------------------------------------------------------------- motion */
	--fx-ease: cubic-bezier(.4, 0, .2, 1);
	--fx-ease-out: cubic-bezier(0, 0, .2, 1);
	--fx-ease-in: cubic-bezier(.4, 0, 1, 1);
	--fx-dur: .15s;
	--fx-dur-enter: .3s;
	--fx-dur-exit: .25s;

	/* ------------------------------------------------------------------- z */
	/* Named, so no template ever invents a z-index. */
	--fx-z-sticky: 10;
	--fx-z-header: 20;
	--fx-z-scrim: 80;
	--fx-z-drawer: 90;
	--fx-z-modal: 100;
	--fx-z-toast: 110;
}

/*
 * Typography roles.
 *
 * Each role carries a mobile and a desktop value. The helper in
 * inc/typography.php writes the pair onto an element as --fx-ts-* custom
 * properties and .fx-text reads them, which is how forty roles avoid becoming
 * forty media queries.
 *
 * DEPARTURE: body text is floored at 12px and legal at 11px. The reference goes
 * to 8px, which is not readable on a phone held at arm's length.
 */
.fx-text {
	font-size: var(--fx-ts-size-m);
	line-height: var(--fx-ts-lh-m);
	font-weight: var(--fx-ts-weight, 400);
	letter-spacing: var(--fx-ts-tracking, 0);
	text-transform: var(--fx-ts-case, none);
	margin: 0;
}

@media (min-width: 768px) {
	.fx-text {
		font-size: var(--fx-ts-size-d);
		line-height: var(--fx-ts-lh-d);
	}
}