/*
 * STUDIO 23 design tokens. Palette from the previous site (studio-23.shop):
 * sage-grey background, paper, ink. Use these variables everywhere instead of
 * raw values so spacing and colors stay consistent across the theme, cart,
 * staff cabinet and Mini App. Documented in docs/design-system.md.
 */

/* Roboto from the owner's archive (brief/fonts-src), variable: wght 100–900, wdth 75–100.
   Apache License 2.0 — assets/fonts/LICENSE.txt. Self-hosted, no Google Fonts. */
@font-face {
	font-family: "Roboto";
	src: url("../fonts/Roboto.woff2") format("woff2-variations"), url("../fonts/Roboto.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 75% 100%;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Roboto";
	src: url("../fonts/Roboto-Italic.woff2") format("woff2-variations"), url("../fonts/Roboto-Italic.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 75% 100%;
	font-style: italic;
	font-display: swap;
}

/* Metric-matched fallback (G07): while Roboto loads the text is set in local
   Arial/Helvetica scaled to Roboto's metrics, so the swap does not move lines. */
@font-face {
	font-family: "Roboto Fallback";
	src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica");
	size-adjust: 100.3%;
	ascent-override: 92.4%;
	descent-override: 24.3%;
	line-gap-override: 0%;
}

:root {
	/* Color */
	--s23-color-bg: #edf0ef;       /* sage-grey page background */
	--s23-color-paper: #fcfcfc;    /* cards, header, cart */
	--s23-color-ink: #232223;      /* text, primary buttons */
	--s23-color-ink-soft: #3a393a; /* hover of ink surfaces */
	--s23-color-muted: #5f5e5f;    /* secondary text, 5.9:1 on bg */
	--s23-color-line: #d5dad8;     /* borders, dividers */
	--s23-color-line-strong: #b9c0bd;
	--s23-color-sage: #dfe5e2;     /* chips, quiet surfaces */
	--s23-color-accent: #232223;   /* primary action */
	--s23-color-on-accent: #fcfcfc;
	--s23-color-sale: #9b3550;     /* «Акция», old-rose, 7:1 on paper */
	--s23-color-error: #b3261e;
	--s23-color-success: #2e6b3f;
	--s23-color-warn-bg: #f6efe2;
	--s23-color-focus: #232223;

	/* Type: Roboto everywhere (G05). Display = semi-condensed light. */
	--s23-font-text: "Roboto", "Roboto Fallback", "Helvetica Neue", Arial, sans-serif;
	--s23-font-display: "Roboto", "Roboto Fallback", "Helvetica Neue", Arial, sans-serif;
	--s23-font-condensed: "Roboto", "Roboto Fallback", "Arial Narrow", Arial, sans-serif;
	--s23-stretch-display: 87.5%;
	--s23-stretch-condensed: 80%;
	--s23-weight-display: 350;
	--s23-text-xs: 0.75rem;
	--s23-text-sm: 0.875rem;
	--s23-text-base: 1rem;
	--s23-text-md: 1.125rem;
	--s23-text-lg: 1.25rem;
	--s23-text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	--s23-text-2xl: clamp(1.875rem, 1.4rem + 2.2vw, 2.875rem);
	--s23-text-3xl: clamp(2.25rem, 1.5rem + 3.6vw, 4.25rem);
	--s23-leading-tight: 1.1;
	--s23-leading-snug: 1.3;
	--s23-leading-text: 1.55;
	--s23-tracking-caps: 0.14em;

	/* Spacing scale (4px base) */
	--s23-space-1: 4px;
	--s23-space-2: 8px;
	--s23-space-3: 12px;
	--s23-space-4: 16px;
	--s23-space-5: 24px;
	--s23-space-6: 32px;
	--s23-space-7: 48px;
	--s23-space-8: 72px;
	--s23-space-9: 104px;
	--s23-section: clamp(48px, 6vw, 96px);

	/* Layout */
	--s23-container: 1240px;
	--s23-gutter: 16px;
	--s23-header-height: 60px;
	--s23-tap: 44px;               /* minimal touch target */
	--s23-radius-sm: 6px;
	--s23-radius: 12px;
	--s23-radius-lg: 20px;
	--s23-radius-pill: 999px;
	--s23-shadow: 0 8px 32px rgba(35, 34, 35, 0.08);
	--s23-shadow-lg: 0 24px 64px rgba(35, 34, 35, 0.16);

	/* Motion (G06–G09, docs/design-system.md «Движение»). One language:
	   things arrive with ease-out or a soft spring, leave faster with ease-in-out.
	   Only transform and opacity are animated. */
	--s23-dur-instant: 120ms;      /* press feedback */
	--s23-dur-fast: 200ms;         /* hover, colour, small fades, leaving */
	--s23-dur-base: 320ms;         /* panels, popovers, list changes */
	--s23-dur-slow: 560ms;         /* scroll reveals, page morphs */
	--s23-dur-spring: 640ms;       /* spring settle time (drawer, cart, cards) */
	--s23-ease-out: cubic-bezier(0.22, 1, 0.36, 1);       /* arrive and settle */
	--s23-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* move across, leave */
	/* Soft spring, damping 0.72, ~4 % overshoot. */
	--s23-ease-spring: linear(0, 0.065 4.2%, 0.211 8.3%, 0.387 12.5%, 0.559 16.7%, 0.708 20.8%, 0.827 25%, 0.914 29.2%, 0.974 33.3%, 1.011 37.5%, 1.03 41.7%, 1.038 45.8%, 1.038 50%, 1.033 54.2%, 1.027 58.3%, 1.02 62.5%, 1.014 66.7%, 1.008 70.8%, 1.005 75%, 1.002 79.2%, 1 83.3%, 0.999 87.5%, 1);
	/* Lively spring, damping 0.48, ~18 % overshoot: only small things (cart counter). */
	--s23-ease-pop: linear(0, 0.067 3.6%, 0.232 7.1%, 0.442 10.7%, 0.658 14.3%, 0.848 17.9%, 0.999 21.4%, 1.102 25%, 1.16 28.6%, 1.179 32.1%, 1.17 35.7%, 1.142 39.3%, 1.104 42.9%, 1.066 46.4%, 1.031 50%, 1.003 53.6%, 0.983 57.1%, 0.972 60.7%, 0.968 64.3%, 0.969 67.9%, 0.974 71.4%, 0.98 75%, 0.987 78.6%, 0.994 82.1%, 0.999 85.7%, 1.003 89.3%, 1.005 92.9%, 1);
	--s23-stagger: 60ms;           /* cascade step between siblings */
	--s23-stagger-max: 8;          /* steps after which the cascade stops growing */
	--s23-rise: 18px;              /* distance a revealed block travels */
	--s23-press-scale: 0.97;
	--s23-transition: var(--s23-dur-fast) var(--s23-ease-out);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--s23-dur-instant: 0ms;
		--s23-dur-fast: 0ms;
		--s23-dur-base: 0ms;
		--s23-dur-slow: 0ms;
		--s23-dur-spring: 0ms;
		--s23-stagger: 0ms;
		--s23-rise: 0px;
		--s23-press-scale: 1;
	}
}

@media (min-width: 768px) {
	:root {
		--s23-gutter: 32px;
		--s23-header-height: 76px;
	}
}