/*
 * COS Woo Theme — дизайн-токены (:root). Новый дизайн масла.сайт.
 *
 * Источник: Claude Design handoff (design-new/untitled/project/assets/tokens.css).
 * Шрифт Onest (локальный, fonts.css), палитра cyan/bronze/ink/navy.
 *
 * ДВА пространства имён — СИНОНИМЫ:
 *   --masla-* / --cyan / --bronze / ... — как в компонентах дизайна (handoff).
 *   --cwt-*  — как в шаблонах нашей темы (header/footer/woocommerce).
 * Оба ссылаются на одни значения, поэтому совместимы и прототипы дизайна,
 * и шаблоны темы, и динамический :root от ThemeService (модуль «Тема»).
 *
 * Раздел «Тема» плагина инлайнит свой :root в wp_head ПОСЛЕ этого файла
 * и может перекрыть палитру значениями из wpaic_theme_tokens.
 */

:root {
	/* ===== Брендовая палитра (handoff) ===== */
	--masla-cyan:      #2A9BC4;  --cyan:      #2A9BC4;  /* primary interactive / CTA */
	--masla-cyan-700:  #1F7FA3;  --cyan-700:  #1F7FA3;  /* hover / pressed */
	--masla-cyan-900:  #145C78;  --cyan-900:  #145C78;
	--masla-cyan-300:  #82C4DF;
	--masla-cyan-100:  #D6EEF6;  --cyan-100:  #D6EEF6;
	--cyan-50:         #ECF7FB;

	--masla-bronze:     #BE9F63;  --bronze:     #BE9F63;  /* accent */
	--masla-bronze-700: #9E8348;  --bronze-700: #9E8348;
	--masla-bronze-300: #DCC79A;
	--masla-bronze-100: #F2EADA;

	--masla-ink:    #13161D;  --ink:  #13161D;  /* deepest ink — тёмные CTA/футер */
	--masla-navy:   #29333D;  --navy: #29333D;  /* wordmark + body chrome */
	--masla-navy-900: #1B2128;
	--masla-navy-700: #29333D;
	--masla-navy-500: #4A5663;
	--masla-navy-300: #8A95A2;
	--masla-navy-100: #DDE2E8;

	/* ===== Нейтральная шкала ===== */
	--neutral-0:   #FFFFFF;
	--neutral-50:  #F6F8FA;
	--neutral-100: #EEF1F4;
	--neutral-200: #E2E6EB;
	--neutral-300: #C7CDD5;
	--neutral-400: #98A1AD;
	--neutral-500: #6C7682;
	--neutral-700: #3D454F;
	--neutral-900: #1B2128;
	--page: #FFFFFF;
	--soft: #F5F8FA;
	--soft-2: #EEF3F6;

	/* ===== Семантика ===== */
	--success: #2E7D5B;  --success-bg: #E5F2EB;
	--warning: #C77A1A;  --warning-bg: #FBEFD9;
	--danger:  #B8362C;  --danger-bg:  #F8E2DF;
	--info: var(--masla-cyan);  --info-bg: var(--masla-cyan-100);

	--bg-page:        var(--neutral-0);
	--bg-soft:        var(--neutral-50);
	--bg-surface:     var(--neutral-0);
	--bg-surface-alt: var(--neutral-100);
	--bg-inverse:     var(--masla-ink);
	--fg-primary:     var(--masla-navy);
	--fg-secondary:   var(--masla-navy-500);
	--fg-muted:       var(--neutral-500);
	--fg-on-dark:     #E8EEF3;
	--fg-on-accent:   #FFFFFF;
	--fg-link:        var(--masla-cyan);
	--fg-link-hover:  var(--masla-cyan-700);
	--border-default: var(--neutral-200);
	--border-strong:  var(--neutral-300);
	--border-focus:   var(--masla-cyan);

	/* ===== Маппинг на --cwt-* (шаблоны темы) ===== */
	--cwt-color-accent:        var(--masla-cyan);
	--cwt-color-accent-hover:  var(--masla-cyan-700);
	--cwt-color-accent-deep:   var(--masla-cyan-900);
	--cwt-color-dark:          var(--masla-ink);
	--cwt-color-text:          var(--masla-navy);
	--cwt-color-text-soft:     var(--masla-navy-500);
	--cwt-color-text-muted:    var(--neutral-500);
	--cwt-color-bg:            var(--neutral-0);
	--cwt-color-surface:       var(--neutral-50);
	--cwt-color-surface-strong:var(--neutral-100);
	--cwt-color-border:        var(--neutral-200);
	--cwt-color-border-strong: var(--neutral-300);
	--cwt-color-success:       var(--success);
	--cwt-color-danger:        var(--danger);
	--cwt-color-warning:       var(--warning);
	--cwt-color-price:         var(--masla-navy);
	--cwt-color-on-accent:     #FFFFFF;
	--cwt-color-on-dark:       #FFFFFF;

	/* ===== Типографика ===== */
	--font-display: 'Onest', 'PT Sans', system-ui, -apple-system, sans-serif;
	--font-body:    'Onest', 'PT Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	--font-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;
	--cwt-font-text:    var(--font-body);
	--cwt-font-ui:      var(--font-body);
	--cwt-font-heading: var(--font-display);

	/* Шкала (px из handoff — это типографика дизайна, не «хардкод layout») */
	--fs-display: 48px;  --lh-display: 1.05;  --tr-display: -0.02em;
	--fs-h1: 32px;  --lh-h1: 1.18;  --tr-h1: -0.015em;
	--fs-h2: 24px;  --lh-h2: 1.22;
	--fs-h3: 18px;  --lh-h3: 1.30;
	--fs-h4: 14px;  --lh-h4: 1.30;
	--fs-body: 15px;  --lh-body: 1.55;
	--fs-small: 13px; --lh-small: 1.45;
	--fs-tiny: 11px;  --lh-tiny: 1.30;
	--fs-price: 22px; --lh-price: 1.10;

	/* fluid-алиасы для шаблонов темы (clamp по брейкпоинтам дизайна) */
	--cwt-text-xs:   clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem);
	--cwt-text-sm:   clamp(0.8125rem, 0.79rem + 0.10vw, 0.875rem);
	--cwt-text-base: clamp(0.9375rem, 0.92rem + 0.08vw, 0.9375rem);
	--cwt-text-lg:   clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
	--cwt-text-xl:   clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
	--cwt-text-2xl:  clamp(1.375rem, 1.1rem + 1.1vw, 2rem);
	--cwt-text-3xl:  clamp(1.625rem, 1.2rem + 1.7vw, 3rem);
	--cwt-text-display: clamp(2rem, 1.3rem + 3vw, 3.25rem);
	--cwt-leading-base: 1.55;
	--cwt-leading-tight: 1.1;

	/* ===== Spacing (4px) ===== */
	--space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px;
	--space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
	--space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;
	--cwt-space-1: 4px; --cwt-space-2: 8px; --cwt-space-3: 12px; --cwt-space-4: 16px;
	--cwt-space-5: clamp(16px, 1vw + 12px, 20px);
	--cwt-space-6: clamp(20px, 1.5vw + 14px, 24px);
	--cwt-space-8: clamp(24px, 2vw + 16px, 32px);
	--cwt-space-10: clamp(32px, 3vw + 20px, 40px);
	--cwt-section-y: clamp(40px, 4vw + 24px, 80px);

	/* ===== Радиусы ===== */
	--radius-xs: 4px;  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 22px;  --r-pill: 999px;
	--radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px;
	--cwt-radius-sm: 8px; --cwt-radius-md: 12px; --cwt-radius-lg: 16px; --cwt-radius-xl: 22px; --cwt-radius-pill: 999px;

	/* ===== Тени ===== */
	--shadow-1: 0 1px 2px rgba(19,22,29,0.04), 0 1px 3px rgba(19,22,29,0.03);
	--shadow-2: 0 4px 12px rgba(19,22,29,0.06), 0 1px 3px rgba(19,22,29,0.04);
	--shadow-3: 0 12px 32px rgba(19,22,29,0.10), 0 2px 6px rgba(19,22,29,0.05);
	--el-1: 0 1px 2px rgba(19,22,29,0.05);
	--el-2: 0 2px 4px rgba(19,22,29,0.04), 0 6px 16px rgba(19,22,29,0.06);
	--el-3: 0 8px 24px rgba(19,22,29,0.10), 0 2px 6px rgba(19,22,29,0.06);
	--el-pop: 0 12px 40px rgba(19,22,29,0.16), 0 4px 12px rgba(19,22,29,0.08);
	--hairline: 1px solid rgba(19,22,29,0.08);
	--hairline-strong: 1px solid rgba(19,22,29,0.13);
	--ring: 0 0 0 3px rgba(42,155,196,0.28);
	--shadow-focus: 0 0 0 3px rgba(42,155,196,0.35);
	--cwt-shadow-sm: var(--shadow-1);
	--cwt-shadow-md: var(--shadow-2);
	--cwt-shadow-lg: var(--shadow-3);
	--cwt-focus-ring: var(--shadow-focus);

	/* ===== CTA (единые) ===== */
	--cwt-cta-h: 44px; --cwt-cta-h-sm: 36px; --cwt-cta-radius: var(--r-sm);
	--cwt-cta-pad-x: 22px; --cwt-cta-fs: var(--fs-body); --cwt-cta-fw: 600;

	/* ===== Motion ===== */
	--ease-out: cubic-bezier(.2,.7,.3,1);
	--ease-in:  cubic-bezier(.6,.1,.9,.3);
	--dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 260ms;
	--cwt-transition: var(--dur-base) var(--ease-out);

	/* ===== Layout ===== */
	--container-max: 1400px;
	--container-narrow: 1240px;
	--sidebar-w: 260px;
	--topbar-h: 88px;
	--cwt-container: 1400px;
	--cwt-container-wide: 1480px;
	--cwt-container-narrow: 820px;
	--cwt-gutter: clamp(16px, 2.5vw, 40px);
	--cwt-header-h: clamp(56px, 4vw, 88px);
	--cwt-z-header: 100;
	--cwt-z-overlay: 1000;
}

@media (prefers-reduced-motion: reduce) {
	:root { --cwt-transition: 0s; --dur-fast: 0s; --dur-base: 0s; --dur-slow: 0s; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}