/* 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-nav: rgba(0, 0, 0, 0.55);
  --color-nav-hover: rgba(0, 0, 0, 0.78);
  --color-hover-bg: rgba(0, 0, 0, 0.03);

  --color-border-soft: rgba(0, 0, 0, 0.06);
  --color-border: rgba(0, 0, 0, 0.10);
  --color-border-hover: rgba(0, 0, 0, 0.16);

  --color-cta: #d45521;
  --color-cta-hover: #c94e1f;
  --color-cta-focus: rgba(212, 85, 33, 0.55);

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

  /* Sizes */
  --logo-height: 82px;
  --logo-height-mobile: 76px;
  --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 6px 16px rgba(212, 85, 33, 0.22);
  --shadow-cta-hover: 0 8px 18px rgba(212, 85, 33, 0.26);
  --shadow-cta-active: 0 5px 14px rgba(212, 85, 33, 0.20);

  --outline-nav: 2px solid rgba(0, 0, 0, 0.25);
  --outline-cta: 2px solid var(--color-cta-focus);

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

  /* Pricing surface */
  --color-surface: #f5f7f8;
  --color-muted: rgba(0, 0, 0, 0.45);

  /* Swatches */
  --swatch-black: #0b0b0b;
  --swatch-white: #f1ebe4;
  --swatch-blue: #00b8c7;
  --swatch-red: #c23b2f;
}