/**
 * Soto design tokens.
 *
 * Phase 1 intentionally keeps the current catalog appearance intact. The
 * legacy aliases below feed the existing --myc-* variables while later phases
 * migrate individual components to the semantic --ps-* tokens.
 */

:root {
	/*
	 * The Soto brand. Deep navy, replacing the dark red the shop opened
	 * with — the owner's decision, made once here: every surface reaches these
	 * through the tokens, so the identity moves as one thing.
	 *
	 * One hue throughout (215°) at a steady saturation, so the steps read as
	 * one colour at different depths rather than as several blues. -600 is the
	 * primary action and -700 what it darkens to; the light end is for brand
	 * surfaces, never for text.
	 */
	--ps-color-brand-950: #08101c;
	--ps-color-brand-900: #0c1727;
	--ps-color-brand-800: #112136;
	--ps-color-brand-700: #162a46;
	--ps-color-brand-600: #1c3557;
	--ps-color-brand-500: #254674;
	--ps-color-brand-100: #e2e9f3;
	--ps-color-brand-50: #f2f5fa;
	--ps-color-brand-border: #cdd7e4;
	--ps-color-brand-border-strong: #bcc9dc;

	--ps-color-ink: #171315;
	--ps-color-ink-strong: #0f0c0d;
	--ps-color-text: #211d1f;
	--ps-color-text-muted: #70676b;
	--ps-color-surface: #ffffff;
	--ps-color-surface-subtle: #f8f6f6;
	--ps-color-surface-muted: #f1eded;
	/* The canvas behind every page — catalog, product, account, checkout. Kept
	   apart from --ps-color-surface so cards stay white and read as raised
	   above it. */
	--ps-color-page: #fcf9f9;
	/* The totals box, the disabled purchase buttons and the shipping/delivery
	   chips read as cut-outs onto the page canvas rather than shapes of their
	   own, so -fill is the same colour as --ps-color-page and moves with it.
	   -border matches .myc-product-summary's own border — the card that
	   encloses all of this — so every border and separator inside that card
	   reads as one family with the card's own edge. */
	--ps-color-summary-fill: var(--ps-color-page);
	--ps-color-summary-border: var(--ps-color-border);
	--ps-color-border: #e3dcde;
	--ps-color-success: #18794e;
	--ps-color-warning: #a15c00;
	--ps-color-danger: #c33232;
	--ps-color-danger-soft: #fff5f5;
	--ps-color-danger-ring: rgb(195 50 50 / 14%);
	--ps-color-info: #2563a8;
	--ps-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	/* The display face, for the product title. A condensed grotesque of the
	   kind kit numbering and matchday graphics are set in — the reference the
	   catalogue is selling — while staying a plain, readable sans rather than
	   a novelty jersey face. The condensed width also earns back room on the
	   long names these products carry. Loaded in fonts.css. */
	--ps-font-display: Oswald, var(--ps-font-sans);
	--ps-radius-sm: 6px;
	--ps-radius-md: 8px;
	--ps-radius-lg: 12px;
	--ps-shadow-focus: 0 0 0 3px rgb(28 53 87 / 20%);
	--ps-transition-fast: 160ms ease;
	--ps-transition-base: 220ms ease;
	--ps-space-2: 8px;
	--ps-space-3: 12px;
	--ps-space-4: 16px;
	--ps-space-5: 24px;
	--ps-space-6: 32px;
	--ps-space-7: 48px;

	/*
	 * How much of the screen the pinned header takes, and where anything else
	 * that pins itself has to start.
	 *
	 * Measured at runtime and written here by catalog-interface.js, because the
	 * header's height is not a constant: it grows with the announcement strip
	 * and the social row, both of which a shopkeeper turns on by filling in a
	 * field. On compact screens search lives in a separate sheet. Every
	 * sticky offset in the theme used to be a number tuned against one header,
	 * and adding a row to that header left them all sitting behind it.
	 *
	 * The fallback is the height of the plain header, so a page whose script
	 * has not run yet is close rather than arbitrary.
	 */
	--myc-header-height: 76px;
	--myc-sticky-top: calc(var(--myc-header-height) + var(--ps-space-5));
	--ps-space-8: 64px;

	/*
	 * The gap above and below every block on a page.
	 *
	 * Its own token rather than a step on the spacing scale: it is one
	 * decision about how a page breathes, and the scale is used by nineteen
	 * other things — paddings, gaps, the odd margin — that have no reason to
	 * move when this does. base.css is the only reader.
	 */
	--ps-block-rhythm: 70px;
	--ps-block-rhythm-compact: 48px;

	--ps-content-discovery: 1360px;
	--ps-card-min-width: 220px;
	--ps-card-image-ratio: 1 / 1;
	--ps-grid-gap: 20px;
	--ps-page-gutter-mobile: 14px;
	/*
	 * The product page pins its two columns with this, and it has to clear the
	 * header like every other sticky offset in the theme. It was 104px, tuned
	 * against a header of 76px.
	 */
	--ps-product-sticky-offset: var(--myc-sticky-top);
	--ps-product-panel-max-height: calc(100svh - 136px);

	/* Legacy values used by the current catalog during the transition. */
	--ps-legacy-text: #171922;
	--ps-legacy-muted: #747a89;
	--ps-legacy-border: #dfe3e8;
	--ps-legacy-soft: #f4f7f5;
	--ps-legacy-dark: #111318;
	--ps-legacy-accent: #1c3557;
	--ps-legacy-hot: #ff6b4a;
}