:root {
  /* ============================================
     FONT
     ============================================ */

  --font-sans: "Manrope", system-ui, sans-serif;

  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;

  /* ============================================
     COLORS (Milolepo Tokens)
     ============================================ */

  /* Base */
  --color-white: #ffffff;
  --color-black: #000000;

  /* Background */
  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-surface-muted: #f3f5f3;

  /* Typography */
  --color-text-primary: #3f4741;
  --color-text-secondary: #535b55;
  --color-text-tertiary: #929993;
  --color-text-disabled: #a8ada9;
  --color-text-accent: #1d1d1d;

  /* Borders */
  --color-border: #e3e5e4;
  --color-border-light: #d5d5d5;
  --color-border-dark: #a6a6a6;

  /* Green / Action */
  --color-action: #8a9b8f;
  --color-action-hover: #71947b;
  --color-action-disabled: #cfd6d1;
  --color-link: #6b7a6f;
  --color-tooltip-bg: #dbe5de;
  --color-icon-stroke: #505b53;

  /* Orange / Secondary */
  --color-orange: #e07a5f;
  --color-orange-light: #f4f1ed;
  --color-orange-stroke: #ecaf9f;

  /* ============================================
     LAYOUT
     ============================================ */

  /* Canvas */
  --layout-canvas: 1280px;
  --layout-content: 1216px; /* 1280 - 32*2 */

  /* Safe padding (used by .container) */
  --layout-padding-desktop: 32px;
  --layout-padding-mobile: 15px;
  --container-padding: clamp(
    var(--layout-padding-mobile),
    4vw,
    var(--layout-padding-desktop)
  );
  --layout-safe-padding: var(--container-padding); /* NEW — был отсутствующим */

  /* Content variants */
  --layout-content-wide: 1400px; /* NEW */
  --layout-content-narrow: 1120px; /* NEW */

  /* Vertical rhythm for sections (used by .section) */
  --layout-space-section: clamp(48px, 7vw, 80px); /* NEW */
  --layout-space-section-sm: clamp(24px, 4vw, 56px); /* NEW */

  /* ============================================
     SPACING SCALE
     ============================================ */

  --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;

  /* ============================================
     TYPOGRAPHY (Adaptive Aliases)
     ============================================ */

  --text-display: clamp(2.25rem, 5vw, 3rem); /* 36 → 48 */
  --text-h1: clamp(1.5rem, 4vw, 2.75rem); /* 24 → 44 */
  --text-h2: clamp(1.25rem, 3vw, 2.5rem); /* 20 → 40 */
  --text-h3: clamp(1.125rem, 2vw, 1.75rem); /* 18 → 28 */

  --text-card-title: clamp(1rem, 2vw, 1.25rem);
  --text-card-price: 1.25rem;
  --text-card-price-old: 1rem;

  --text-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.75rem;
  --text-body-lg: 1.125rem;

  --text-cap: 0.875rem;
  --letter-cap: 0.08em;


  /* ============================================
     TYPOGRAPHY (Exact sizes from Figma)
     Single source of truth for component sizes
     ============================================ */

  --fs-display-d: 48px; /* desk/display */
  --fs-h1-d: 44px; /* desk/h1 */
  --fs-h2-d: 40px; /* desk/h2 */
  --fs-h3-d: 28px; /* desk/h3 */
  --fs-h4-d: 24px; /* desk/h4 */
  --fs-text-d: 16px; /* desk/text */
  --fs-text-sm-d: 14px; /* desk/text-small */
  --fs-desc-d: 12px; /* desk/description */

  --fs-display-m: 36px; /* mob/display */
  --fs-h1-m: 24px; /* mob/H1 */
  --fs-h2-m: 20px; /* mob/H2 */
  --fs-h3-m: 18px; /* mob/H3 */
  --fs-text-m: 14px; /* mob/text */

  /* UI */
  --header-h-d: 80px;
  --header-h-m: 56px;

  /* Use explicit strokes like in Figma */
  --stroke-landing: var(--color-border-light);


  /* ============================================
     RADIUS
     ============================================ */

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ============================================
     SHADOWS
     ============================================ */

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.08);

  /* ============================================
     TRANSITIONS
     ============================================ */

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* ============================================
     Z-INDEX
     ============================================ */

  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

/* base body styles */
body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--font-regular);
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-size: var(--text-body);
  line-height: 1.5;
}