/*
  ZEPRA MARKETING DESIGN BIBLE
  
  1. Product is the hero — UI mockup = главный decorative object
  2. One dominant object per scene
  3. Depth has meaning — closer = stronger shadow
  4. Motion explains — no spin/bounce spam
  5. Calm sections amplify wow sections
  6. Real Zepra beats fake heavy CRM UI
  7. Orange brand #FF7912 — never competitor blue
  8. CRM lite truth — no warehouse/payroll in marketing visuals
*/

:root {
  /* Spacing scale */
  --mkt-space-1: 4px;
  --mkt-space-2: 8px;
  --mkt-space-3: 12px;
  --mkt-space-4: 16px;
  --mkt-space-5: 24px;
  --mkt-space-6: 32px;
  --mkt-space-7: 48px;
  --mkt-space-8: 64px;
  --mkt-space-9: 96px;
  --mkt-space-10: 128px;
  --mkt-space-11: 160px;

  /* Section rhythm */
  --mkt-section-y: clamp(96px, 12vw, 160px);
  --mkt-section-y-sm: clamp(72px, 8vw, 120px);

  /* Radius system */
  --mkt-radius-badge: 999px;
  --mkt-radius-btn: 14px;
  --mkt-radius-input: 14px;
  --mkt-radius-card-sm: 20px;
  --mkt-radius-card-lg: 32px;
  --mkt-radius-section: 48px;
  --mkt-radius-cta: 56px;

  /* Shadows (4 levels + float) */
  --mkt-shadow-0: none;
  --mkt-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.04);
  --mkt-shadow-2: 0 12px 32px rgba(0, 0, 0, 0.08);
  --mkt-shadow-3: 0 24px 64px rgba(0, 0, 0, 0.12);
  --mkt-shadow-float: 0 32px 80px rgba(255, 121, 18, 0.16);
  --mkt-shadow-dark: 0 32px 80px rgba(0, 0, 0, 0.45);

  /* Containers */
  --mkt-container: 1240px;
  --mkt-container-wide: 1540px;
  --mkt-container-bleed: 1720px;

  /* Typography */
  --mkt-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mkt-font-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mkt-h1: clamp(44px, 6vw, 88px);
  --mkt-h2: clamp(34px, 4.5vw, 60px);
  --mkt-h3: clamp(24px, 3vw, 36px);
  --mkt-body-lg: clamp(17px, 2vw, 20px);
  --mkt-body: clamp(16px, 1.8vw, 18px);
  --mkt-label: clamp(12px, 1.2vw, 14px);

  /* Brand Colors (Zepra orange, NOT blue) */
  --mkt-brand: #FF7912;
  --mkt-brand-hover: #E8680A;
  --mkt-brand-soft: rgba(255, 121, 18, 0.10);
  --mkt-brand-dim: rgba(255, 121, 18, 0.14);
  --mkt-brand-glow: rgba(255, 121, 18, 0.22);
  --mkt-brand-active: #D95D02;
  --mkt-brand-light: #FFF4EB;

  /* Surfaces & Neutrals */
  --mkt-bg: #FAFAFC;
  --mkt-bg-alt: #F4F5F8;
  --mkt-surface: #FFFFFF;
  --mkt-surface-muted: #F3F4F6;
  --mkt-surface-dark: #0F1114;
  --mkt-surface-dark-card: #181B20;
  --mkt-surface-dark-border: rgba(255, 255, 255, 0.08);

  /* Text & Lines */
  --mkt-text: #121416;
  --mkt-text-muted: #5C6370;
  --mkt-text-dim: #8B949E;
  --mkt-text-inverse: #FFFFFF;
  --mkt-text-inverse-muted: #9CA3AF;
  --mkt-line: #E8EAEF;
  --mkt-line-subtle: #F0F2F6;

  /* Status Accents */
  --mkt-status-success: #10B981;
  --mkt-status-success-bg: rgba(16, 185, 129, 0.12);
  --mkt-status-vk: #0077FF;
  --mkt-status-vk-bg: rgba(0, 119, 255, 0.10);
  --mkt-status-warning: #F59E0B;
  --mkt-status-danger: #EF4444;

  /* MOBILE (2026-08-15): safe-area + touch targets */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --touch-target-min: 44px;
}

/* Reset & Global Foundation */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--mkt-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--mkt-text);
  background-color: var(--mkt-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  overflow-x: clip;
  max-width: 100%;
}

body {
  min-height: 100vh;
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
  background-color: var(--mkt-bg);
  color: var(--mkt-text);
}

/* Container Utility */
.mkt-container {
  width: 100%;
  max-width: var(--mkt-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: max(var(--mkt-space-5), var(--sal));
  padding-right: max(var(--mkt-space-5), var(--sar));
}

.mkt-container-wide {
  width: 100%;
  max-width: var(--mkt-container-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--mkt-space-5);
  padding-right: var(--mkt-space-5);
}

.mkt-container-bleed {
  width: 100%;
  max-width: var(--mkt-container-bleed);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--mkt-space-4);
  padding-right: var(--mkt-space-4);
}

/* Typography Presets */
.mkt-h1 {
  font-size: var(--mkt-h1);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--mkt-text);
}

.mkt-h2 {
  font-size: var(--mkt-h2);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--mkt-text);
}

.mkt-h3 {
  font-size: var(--mkt-h3);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--mkt-text);
}

.mkt-lead {
  font-size: var(--mkt-body-lg);
  line-height: 1.55;
  color: var(--mkt-text-muted);
  font-weight: 400;
}

.mkt-body {
  font-size: var(--mkt-body);
  line-height: 1.6;
  color: var(--mkt-text-muted);
}

.mkt-caption {
  font-size: var(--mkt-label);
  line-height: 1.4;
  color: var(--mkt-text-dim);
}

/* Text Highlights */
.mkt-text-orange {
  color: var(--mkt-brand);
}

.mkt-text-gradient {
  color: var(--mkt-brand);
}

/* Section Spacing System */
.mkt-section {
  padding-top: var(--mkt-section-y);
  padding-bottom: var(--mkt-section-y);
  position: relative;
}

.mkt-section--sm {
  padding-top: var(--mkt-section-y-sm);
  padding-bottom: var(--mkt-section-y-sm);
}

.mkt-section--dark {
  background-color: var(--mkt-surface-dark);
  color: var(--mkt-text-inverse);
}

.mkt-section--muted {
  background-color: var(--mkt-bg-alt);
}