/**
 * Penaltishop 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 {
	/* Approved Penaltishop brand direction. Not applied during Phase 1. */
	--ps-color-brand-950: #26070b;
	--ps-color-brand-900: #3a0b11;
	--ps-color-brand-800: #531019;
	--ps-color-brand-700: #701723;
	--ps-color-brand-600: #8f1f2e;
	--ps-color-brand-500: #aa293a;
	--ps-color-brand-100: #f8e8eb;
	--ps-color-brand-50: #fcf4f5;
	--ps-color-brand-border: #ead2d7;
	--ps-color-brand-border-strong: #e7cbd1;

	/* The Jugador edition's mark: the PRO chip on catalog cards and the
	   edition badge on the product page. One token because the two are the
	   same signal in two places and have to move together. */
	--ps-color-gold: #ddb63f;

	--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(143 31 46 / 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, and it shrinks on a phone when the search field folds away. 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;
	--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: #0f766e;
	--ps-legacy-hot: #ff6b4a;
}