/* public/css/vars.css */

:root {
  /* Layout */
  --container-max: 1240px;
  --header-height: 88px;
  --header-height-mobile: 76px;
  --header-padding-x: 28px;
  --header-padding-x-compact: 18px;

  /* Spacing */
  --gap-nav: 22px;
  --gap-nav-compact: 16px;
  --gap-menu: 22px;
  --gap-menu-compact: 14px;

  /* Typography */
  --nav-font-size: 15px;
  --nav-font-size-compact: 14px;
  --cta-font-size: 12px;
  --cta-font-size-mobile: 11px;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --letter-spacing-cta: 0.06em;

  /* Colors */
  --color-bg: #ffffff;
  --color-text: #111111;
  --color-text-soft: rgba(17, 17, 17, 0.68);
  --color-nav: rgba(17, 17, 17, 0.62);
  --color-nav-hover: #6d28d9;
  --color-hover-bg: rgba(109, 40, 217, 0.06);

  --color-primary: #6d28d9;
  --color-primary-hover: #5b21b6;
  --color-primary-active: #4c1d95;
  --color-primary-soft: #ede9fe;
  --color-primary-soft-hover: #ddd6fe;
  --color-primary-focus: rgba(109, 40, 217, 0.34);

  --color-border-soft: rgba(17, 17, 17, 0.08);
  --color-border: rgba(17, 17, 17, 0.12);
  --color-border-hover: rgba(109, 40, 217, 0.32);

  --color-cta: var(--color-primary);
  --color-cta-hover: var(--color-primary-hover);
  --color-cta-focus: var(--color-primary-focus);

  --color-surface: #f6f3ff;
  --color-surface-2: #faf8ff;
  --color-muted: rgba(17, 17, 17, 0.45);

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 12px;

  /* Sizes */
  --logo-height: 62px;
  --icon-btn: 42px;
  --icon-btn-mobile: 40px;
  --icon-size: 18px;

  --cta-height: 42px;
  --cta-height-mobile: 40px;
  --cta-pad-x: 18px;
  --cta-pad-x-mobile: 14px;

  /* Effects */
  --transition-fast: 120ms ease;
  --transition: 140ms ease;

  --shadow-cta: 0 8px 20px rgba(109, 40, 217, 0.18);
  --shadow-cta-hover: 0 10px 24px rgba(109, 40, 217, 0.22);
  --shadow-cta-active: 0 6px 16px rgba(109, 40, 217, 0.16);

  --outline-nav: 2px solid rgba(109, 40, 217, 0.22);
  --outline-cta: 2px solid var(--color-cta-focus);

  /* Breakpoints */
  --bp-nav-compact: 1100px;
  --bp-mobile: 820px;

  /* Swatches */
  --swatch-black: #0b0b0b;
  --swatch-white: #f1ebe4;
  --swatch-purple: #6d28d9;
  --swatch-purple-dark: #4c1d95;

  /* Estimator styles */
  --color-cta-intro: #2663ff;
  --color-cta-intro-hover: #245fd7;
  --color-cta-intro-shadow: 0 14px 28px rgba(38, 99, 255, 0.22);
  --color-cta-intro-shadow-hover: 0 18px 32px rgba(38, 99, 255, 0.26);
}

@media (max-width: 1120px) {
  :root {
    --logo-height: 46px;
  }
}