/**
 * Design Tokens — Landmann
 * Все цвета, отступы и размеры централизованы здесь.
 * Используйте var(--token-name) вместо hardcoded значений.
 *
 * WCAG AA: контраст ≥4.5:1 для обычного текста, ≥3:1 для крупного.
 *
 * BREAKPOINTS (desktop-first, max-width):
 *   1600px — Large desktop
 *   1366px — Small laptop
 *   1199px — Tablet landscape
 *    992px — Tablet portrait
 *    768px — Small tablet
 *    480px — Mobile landscape
 *    375px — Small mobile
 *    600px — Used for chat/FAB components only
 */

:root {
  /* ========== ЦВЕТА — Тёмная тема (по умолчанию) ========== */
  --color-bg-main: #241C1A;
  --color-bg-card: #241C1A;
  --color-bg-overlay: #40312ead;

  --color-accent: #C78C47;
  --color-accent-hover: #d99b56;
  --color-accent-sand: #DAD1C8;

  --color-border: #443D3A;
  --color-border-light: #DCD3C7;
  --color-border-light-2: #e5e5e5;

  --color-icon: #C78C47;
  --color-sale: #e30613;
  --color-sale-bg: #b91c1c;

  /* Текст */
  --color-text-white: #FAF8F7;
  --color-text-light: #FAF8F7;
  --color-text-gray: #8B9AAF;
  --color-text-dark: #4F413C;
  /* WCAG AA: контраст ≥4.5:1 на accent #C78C47 */
  --color-text-on-accent: #0d0b0a;
  --color-text-muted: #DAD1C8;
  --color-white: #ffffff;

  /* Семантические алиасы */
  --color-text-primary: var(--color-text-white);
  --color-text-secondary: var(--color-text-gray);
  --color-text-tertiary: var(--color-text-muted);

  /* Статусы */
  --color-success: #54b627;
  --color-success-alt: #4CAF50;
  --color-error: #f45959;
  --color-warning: #C9A227;

  /* Дополнительные (UI, AI-search, модалки) */
  --color-bg-dark: #222;
  --color-bg-dark-alt: #2a2a2a;
  --color-bg-dark-input: #333;
  --color-border-dark: #444;
  --color-border-dark-alt: #3a3a3a;
  --color-bg-disabled: #f4f4f4;
  --color-bg-disabled-alt: #f3f3f3;
  --color-text-gray-dark: #666;
  --color-text-placeholder: #555;
  --color-text-muted-light: #D7D2CB;
  --color-accent-light: #d4a561;
  --color-bg-overlay-dark: #363846;
  --color-border-light-3: #cfc8d8;
  --color-text-dark-alt: #5e4b45;
  --color-bg-card-dark: #3d2f2c;

  /* Touch targets (WCAG 2.2) */
  --touch-target-min: 44px;
  --touch-target-spacing: 8px;

  /* Размеры изображений (CLS) */
  --img-flag-size: 24px;
  --img-flag-size-sm: 18px;

  /* Grid System (из index.css) */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 80px;
  --spacing-5xl: 96px;
  --spacing-6xl: 128px;
  --spacing-7xl: 160px;

  /* Field Pattern */
  --field-size: 64px;

  /* catalogOptions — 8pt grid (Мюллер-Брокманн), адаптивная высота */
  --catalog-options-max-vh: 90;
  --catalog-options-padding: 24px;

  /* content-visibility: intrinsic size для секций (оптимизация скролла) */
  --section-intrinsic-size: 600px;

  /* Carousels — единый конфиг (8pt grid) */
  --carousel-padding-x: 70px;
  --carousel-space: 30px;
  --carousel-space-sm: 12px;
  --carousel-space-md: 20px;
  --carousel-margin-bottom: var(--spacing-2xl);

  /* Fluid Typography */
  --fs-body: clamp(0.875rem, 0.34vw + 0.82rem, 1rem);
  --fs-small: clamp(0.75rem, 0.2vw + 0.7rem, 0.875rem);
  --fs-h4: clamp(1rem, 0.5vw + 0.88rem, 1.25rem);
  --fs-h3: clamp(1.25rem, 0.8vw + 1.05rem, 1.5rem);
  --fs-h2: clamp(1.5rem, 1.2vw + 1.2rem, 2rem);
  --fs-h1: clamp(2rem, 2.38vw + 1.5rem, 3rem);
  --fs-hero: clamp(2.5rem, 3vw + 1.8rem, 4rem);

  /* Fluid Spacing */
  --space-fluid-xs: clamp(0.5rem, 0.5vw + 0.3rem, 0.75rem);
  --space-fluid-sm: clamp(0.75rem, 0.8vw + 0.5rem, 1rem);
  --space-fluid-md: clamp(1rem, 1.38vw + 0.7rem, 1.5rem);
  --space-fluid-lg: clamp(1.5rem, 2vw + 1rem, 2.5rem);
  --space-fluid-xl: clamp(2rem, 3vw + 1.2rem, 4rem);

  /* Hero / Showcase — industrial conveyor */
  --hero-bg-top: #2a2018;
  --hero-bg-bottom: #161110;
  --hero-vignette: rgba(10, 8, 6, 0.35);
  --hero-ambient: rgba(199, 140, 71, 0.05);
  --hero-banner-bg: #1a1210;
  --hero-text-ghost: rgba(255, 255, 255, 0.15);
  --hero-text-stroke: rgba(255, 255, 255, 0.30);
  --hero-glow: rgba(199, 140, 71, 0.18);
  --hero-ceiling-light: rgba(255, 245, 230, 0.09);
  --hero-ceiling-warm: rgba(199, 140, 71, 0.05);
  --hero-floor-bounce: rgba(199, 140, 71, 0.03);
  --hero-nav-border: rgba(255, 255, 255, 0.15);
  --hero-nav-color: rgba(255, 255, 255, 0.4);
  --hero-text-primary: rgba(255, 255, 255, 0.85);
  --hero-text-muted: rgba(255, 255, 255, 0.5);
  --hero-text-dim: rgba(255, 255, 255, 0.55);
  --hero-text-spec: rgba(255, 255, 255, 0.92);
  --hero-border-subtle: rgba(255, 255, 255, 0.1);
  --hero-bg-hover: rgba(255, 255, 255, 0.05);
}

/* Светлая тема — Elegant Warm Brutalism */
.white_fon {
  /* Основные цвета из брендбука */
  --color-bg-main: #EBE6DD;
  --color-bg-card: #FAF8F7;
  --color-bg-overlay: rgba(36, 28, 26, 0.04);
  
  /* Границы */
  --color-border: #DCD3C7;
  --color-border-light: #DCD3C7;
  --color-border-light-2: #CDC3B7;

  /* Текст */
  --color-text-white: #241C1A;
  --color-text-light: #3C434A;
  --color-text-gray: #4F5B67;
  --color-text-dark: #241C1A;
  --color-text-muted: #9E9489;
  --color-text-on-accent: #ffffff;

  /* Специфичные */
  --color-bg-header: #FAF8F7;
  --color-bg-input: #EBE6DD;
  --color-text-header: #241C1A;

  /* Тени брутализма */
  --shadow-brutal-sm: 4px 4px 0 #C78C47;
  --shadow-brutal-md: 6px 6px 0 #C78C47;
  --shadow-brutal-lg: 10px 10px 0 #C78C47;
  --shadow-brutal-dark: 4px 4px 0 #241C1A;

  /* Hero / Showcase — light */
  --hero-bg-top: #EBE6DD;
  --hero-bg-bottom: #DCD3C7;
  --hero-vignette: rgba(36, 28, 26, 0.08);
  --hero-ambient: rgba(199, 140, 71, 0.06);
  --hero-banner-bg: #FAF8F7;
  --hero-text-ghost: rgba(36, 28, 26, 0.04);
  --hero-text-stroke: rgba(36, 28, 26, 0.1);
  --hero-glow: rgba(199, 140, 71, 0.12);
  --hero-ceiling-light: rgba(199, 140, 71, 0.04);
  --hero-ceiling-warm: rgba(199, 140, 71, 0.03);
  --hero-floor-bounce: rgba(199, 140, 71, 0.03);
  --hero-nav-border: rgba(36, 28, 26, 0.15);
  --hero-nav-color: #66727D;
  --hero-text-primary: #241C1A;
  --hero-text-muted: #66727D;
  --hero-text-dim: rgba(36, 28, 26, 0.6);
  --hero-text-spec: #3C434A;
  --hero-border-subtle: rgba(36, 28, 26, 0.1);
  --hero-bg-hover: rgba(36, 28, 26, 0.06);
}