:root {
  --color-primary: #1252a4;
  --color-primary-hover: #0d3f80;
  --color-secondary: #192730;
  --color-secondary-hover: #0f1a21;
  --color-accent: #2ea3f2;
  --color-accent-hover: #1b8ad6;
  --color-text: #192730;
  --color-text-muted: #4b5a66;
  --color-surface: #f3f7fc;
  --color-background: #ffffff;
  --color-border: #dce5f0;
  --font-heading: Montserrat, system-ui, sans-serif;
  --font-body: Montserrat, system-ui, sans-serif;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;
}

/* Custom CSS for Coufal Insurance Agency
 * Add your custom styles here.
 * Theme tokens are available as CSS variables within .wpc-theme-coufal scope:
 *   - var(--color-primary), var(--color-secondary), var(--color-text), etc.
 *   - var(--font-heading), var(--font-body)
 *   - var(--space-sm), var(--space-md), var(--space-lg), etc.
 *   - var(--radius-sm), var(--radius-md), var(--radius-lg)
 * Use the short format above — they resolve inside the theme scope automatically.
 */