/**
 * Verre & Sens design tokens.
 *
 * This file is the CSS source of truth for custom front-end tokens that are
 * more specific than WordPress presets in theme.json.
 */
:root {
  /* Core colors */
  --vs-color-text: #50535f;
  --vs-color-text-soft: #6f7681;
  --vs-color-text-muted: #7c818c;
  --vs-color-line: #e8eef0;
  --vs-color-input-border: #dfe8eb;
  --vs-color-image-bg: #f1f6f6;
  --vs-color-white: #ffffff;
  --vs-color-danger: #c25445;

  /* Brand blue: every blue tint should derive from this RGB source. */
  --vs-blue-rgb: 42, 165, 173;
  --vs-blue-primary: rgba(var(--vs-blue-rgb), 1);
  --vs-blue-primary-soft: rgba(var(--vs-blue-rgb), .88);
  --vs-blue-section: rgba(var(--vs-blue-rgb), .055);
  --vs-blue-float: rgba(var(--vs-blue-rgb), .075);
  --vs-blue-shape: rgba(var(--vs-blue-rgb), .105);
  --vs-blue-ui-soft: rgba(var(--vs-blue-rgb), .10);
  --vs-blue-dot: rgba(var(--vs-blue-rgb), .36);

  /* Typography */
  --vs-font-main: var(--wp--preset--font-family--plus-jakarta-sans, 'Plus Jakarta Sans', sans-serif);
  --vs-text-hero: clamp(48px, 4.65vw, 70px);
  --vs-text-section: 52px;
  --vs-text-block: 30px;
  --vs-text-card: 22px;
  --vs-text-body: 18px;
  --vs-text-support: 16px;
  --vs-text-meta: 14px;
  --vs-lh-tight: 1.04;
  --vs-lh-body: 1.65;
  --vs-track-tight: -.05em;

  /* Spacing scale */
  --vs-space-1: 8px;
  --vs-space-2: 16px;
  --vs-space-3: 24px;
  --vs-space-4: 32px;
  --vs-space-5: 48px;
  --vs-space-6: 64px;
  --vs-space-section: 140px;

  /* Layout */
  --vs-container: 1360px;
  --vs-container-wide: 1400px;
  --vs-page-x: 40px;

  /* Shapes and effects */
  --vs-radius-sm: 16px;
  --vs-radius-md: 28px;
  --vs-radius-lg: 34px;
  --vs-radius-pill: 999px;
  --vs-shadow-soft: 0 22px 54px rgba(43, 67, 76, .075);
  --vs-shadow-hover: 0 30px 76px rgba(43, 67, 76, .11);
  --vs-shadow-strong: 0 28px 70px rgba(43, 67, 76, .10);
  --vs-transition: .24s ease;
}

@media (max-width: 720px) {
  :root {
    --vs-text-section: 40px;
    --vs-text-body: 16px;
    --vs-space-section: 84px;
    --vs-page-x: 28px;
  }
}