/* Serviscom brand v2 design tokens. Kept separate from page markup for safe SSR reuse. */
:root {
  --brand-50: #fff3f3;
  --brand-100: #ffe2e3;
  --brand-200: #ffc7ca;
  --brand-300: #ff9ba0;
  --brand-400: #f55f67;
  --brand-500: #e02128;
  --brand-600: #c51d25;
  --brand-700: #a9131a;
  --brand-800: #811017;
  --brand-900: #57070b;
  --primary: var(--brand-500);
  --accent: var(--brand-700);
  --accent-hover: var(--brand-800);
  --graphite: #3a3a3c;

  --neutral-0: #fff;
  --neutral-50: #f7f8fa;
  --neutral-100: #eef1f5;
  --neutral-200: #dce1e8;
  --neutral-300: #c3cad4;
  --neutral-400: #9099a7;
  --neutral-500: #667085;
  --neutral-600: #505a68;
  --neutral-700: #344054;
  --neutral-800: #202631;
  --neutral-900: #14181f;

  --success: #127a3e;
  --warning: #8a4b00;
  --error: #a9131a;
  --focus-ring: #2563eb;
  --whatsapp: #168348;

  --ink: var(--neutral-900);
  --muted: var(--neutral-600);
  --line: var(--neutral-200);
  --surface: var(--neutral-50);
  --paper: var(--neutral-0);
  --red: var(--brand-500);
  --red-d: var(--brand-700);
  --green: var(--success);
  --focus: var(--focus-ring);
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

  --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;
  --s1: var(--space-1);
  --s2: var(--space-2);
  --s3: var(--space-3);
  --s4: var(--space-4);
  --s5: var(--space-6);
  --s6: var(--space-8);
  --s7: var(--space-12);
  --s8: var(--space-16);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --r-sm: var(--radius-sm);
  --r-md: var(--radius-md);
  --r-lg: var(--radius-lg);
  --r-pill: 999px;

  --shadow-1: 0 2px 8px rgba(20, 24, 31, .05);
  --shadow-2: 0 12px 32px rgba(20, 24, 31, .09);
  --shadow-3: 0 24px 64px rgba(20, 24, 31, .14);
  --shadow: var(--shadow-2);

  --type-display: clamp(2.25rem, 4.3vw, 3.75rem);
  --type-h1: clamp(1.9rem, 3.1vw, 3rem);
  --type-h2: clamp(1.5rem, 2.2vw, 2rem);
  --type-h3: clamp(1.125rem, 1.5vw, 1.375rem);
  --type-body: clamp(1rem, .98rem + .12vw, 1.0625rem);
  --type-small: .875rem;
  --t-hero: var(--type-display);
  --t-h1: var(--type-h1);
  --t-h2: var(--type-h2);
  --t-h3: var(--type-h3);
  --t-body: var(--type-body);
  --t-small: var(--type-small);
  --t-micro: .75rem;
  --t-price: clamp(1.375rem, 2.2vw, 1.75rem);
}