/**
 * Design tokens — metall4.ru home v2
 * Primary: #ED1C24 · Secondary: amber · Graphite accents
 * Use var(--color-brand-*) — do not hardcode brand hex in components.
 */

:root {
  /* Brand */
  --color-brand-primary: #ED1C24;
  --color-brand-primary-hover: #C62828;
  --color-brand-primary-active: #B71C1C;
  --color-brand-primary-soft: #FDECEA;
  --color-brand-primary-ring: color-mix(in srgb, var(--color-brand-primary) 22%, transparent);

  --color-brand-amber: #E65100;
  --color-brand-amber-bright: #FF6A00;
  --color-brand-secondary: var(--color-brand-amber);
  --color-brand-amber-hover: #E65100;
  --color-brand-secondary-hover: var(--color-brand-amber-hover);
  --color-brand-amber-soft: #FFF3E0;
  --color-brand-secondary-soft: var(--color-brand-amber-soft);

  --color-brand-graphite: #37474F;
  --color-brand-graphite-hover: #263238;
  --color-brand-graphite-deep: #1A1D21;
  --color-brand-dark: var(--color-brand-graphite-deep);
  --color-brand-dark-elevated: #263238;

  /* Deprecated: do not use as brand primary */
  /* --color-legacy-blue: #1565C0; */

  /* Legacy alias — same as primary (logo red) */
  --color-brand-red: var(--color-brand-primary);
  --color-brand-red-hover: var(--color-brand-primary-hover);

  --color-on-primary: #FFFFFF;
  --color-on-dark: #FFFFFF;
  --color-on-dark-muted: #B0B8BE;

  /* Neutrals */
  --color-ink: #1A1D21;
  --color-ink-muted: #5A636A;
  --color-ink-subtle: #8B949A;
  --color-border: #E2E6E9;
  --color-border-strong: #B0B8BE;
  --color-surface: #FFFFFF;
  --color-surface-muted: #F7F9FA;
  --color-surface-tint: #F5F6F7;

  /* Semantic */
  --color-success: #2E7D32;
  --color-danger: #C62828;
  --color-focus: #ED1C24;
  --color-alert-danger-bg: #FDECEA;
  --color-alert-warn-bg: #FFF8E7;

  /* Typography */
  --font-sans: Inter, Manrope, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  --text-display-size: 2rem;
  --text-display-lh: 1.15;
  --text-h1-size: 2rem;
  --text-h1-lh: 1.15;
  --text-h2-size: 1.375rem;
  --text-h2-lh: 1.25;
  --text-h3-size: 1.125rem;
  --text-h3-lh: 1.35;
  --text-lead-size: 1.125rem;
  --text-lead-lh: 1.5;
  --text-body-size: 1rem;
  --text-body-lh: 1.5;
  --text-body-sm-size: 0.875rem;
  --text-body-sm-lh: 1.45;
  --text-stat-size: 1.375rem;
  --text-stat-lh: 1.2;
  --text-caption-size: 0.75rem;
  --text-caption-lh: 1.35;

  /* Space */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;
  --space-96: 96px;

  /* Elevation v2 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 6px 16px rgba(26, 29, 33, 0.10), 0 2px 4px rgba(26, 29, 33, 0.06);
  --shadow-card-hover: 0 18px 40px rgba(26, 29, 33, 0.18), 0 6px 12px rgba(26, 29, 33, 0.10);
  --shadow-header: 0 4px 24px rgba(26, 29, 33, 0.10);
  --shadow-dropdown: 0 8px 24px rgba(26, 29, 33, 0.10);
  --shadow-modal: 0 16px 48px rgba(26, 29, 33, 0.24);
  --lift-hover: translateY(-6px);

  --container: 1280px;
  --gutter: 16px;
  --touch: 44px;
  --header-h: 64px;
  --section-pad-y: 40px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
    --header-h: 72px;
    --section-pad-y: 48px;
    --text-display-size: 2.25rem;
    --text-h2-size: 1.5rem;
    --text-stat-size: 1.5rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 32px;
    --header-h: 80px;
    --section-pad-y: 56px;
    --text-display-size: 3.25rem;
    --text-display-lh: 1.1;
    --text-h1-size: 3rem;
    --text-h1-lh: 1.1;
    --text-h2-size: 1.75rem;
    --text-h2-lh: 1.25;
    --text-h3-size: 1.25rem;
    --text-lead-size: 1.25rem;
    --text-stat-size: 1.75rem;
  }
}

@media (min-width: 1280px) {
  :root {
    --section-pad-y: 72px;
    --text-display-size: 3.75rem;
    --text-h1-size: 3.5rem;
    --text-h2-size: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --lift-hover: none;
  }
}

/* —— v2.1 punch elevation/type (VISUAL-home-v2.1-punch) —— */
:root {
  --text-display-wow: 2.25rem;          /* sm 36 */
  --text-display-wow-lh: 1.12;
  --text-stat-number: 1.75rem;          /* sm 28 */
  --text-stat-number-lh: 1.1;
  --text-stat-label: 0.75rem;
  --text-stat-label-lh: 1.35;

  --shadow-card-deep:
    0 6px 16px rgba(26, 29, 33, 0.10),
    0 2px 4px rgba(26, 29, 33, 0.06);
  --shadow-card-hover-deep:
    0 16px 40px rgba(26, 29, 33, 0.18),
    0 6px 12px rgba(26, 29, 33, 0.10);
  --lift-hover-strong: translateY(-4px);
  --border-glow-primary:
    0 0 0 1px rgba(237, 28, 36, 0.28),
    0 0 0 4px rgba(237, 28, 36, 0.08);
  --border-glow-amber:
    0 0 0 1px rgba(230, 81, 0, 0.22),
    0 0 0 4px rgba(255, 106, 0, 0.06);

  --header-blur: blur(12px) saturate(1.2);
  --modal-backdrop-blur: blur(8px);
  --header-bg-frosted: rgba(255, 255, 255, 0.82);
  --header-bg-frosted-scrolled: rgba(255, 255, 255, 0.92);
  --modal-overlay-bg: rgba(26, 29, 33, 0.58);

  --btn-hero-min-height: 52px;
  --btn-dark-cta-min-height: 52px;

  --hero-overlay: linear-gradient(
    105deg,
    rgba(26, 29, 33, 0.78) 0%,
    rgba(26, 29, 33, 0.55) 42%,
    rgba(26, 29, 33, 0.18) 72%,
    rgba(26, 29, 33, 0.05) 100%
  );
  --hero-overlay-sm: linear-gradient(
    180deg,
    rgba(26, 29, 33, 0.15) 0%,
    rgba(26, 29, 33, 0.72) 55%,
    rgba(26, 29, 33, 0.88) 100%
  );
}

@media (min-width: 1024px) {
  :root {
    --text-display-wow: 3.5rem;         /* 56 */
    --text-display-wow-lh: 1.08;
    --text-stat-number: 2.25rem;        /* 36 */
  }
}

@media (min-width: 1280px) {
  :root {
    --text-display-wow: 4rem;           /* 64 */
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --lift-hover-strong: none;
  }
}