/* ==========================================================================
   theme.css — InfoChezVous design tokens
   Edit this file to retheme the whole site (colors, typography, spacing).
   ========================================================================== */

:root {
  /* Brand blues */
  --color-primary: #1e3a8a;        /* dark blue — headings, nav */
  --color-primary-light: #3b82f6;  /* mid blue — accents, links */
  --color-primary-dark: #1e40af;   /* deep blue — hover states */
  --color-accent: #60a5fa;         /* light blue — highlights */

  /* Backgrounds */
  --color-bg: #ffffff;
  --color-bg-light: #f0f4ff;       /* alternating light sections */
  --color-bg-dark: #1e3a5f;        /* footer */
  --color-gradient-hero: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);

  /* Text */
  --color-text: #1e293b;
  --color-text-muted: #64748b;
  --color-text-light: #ffffff;

  /* Feedback */
  --color-success: #22c55e;        /* confirmation messages */
  --color-check: #16c95f;          /* checkmarks — bright Tailwind green */
  --color-popular: #facc15;        /* "POPULAIRE" badge */

  /* Accent — maintenance service tile */
  --color-purple: #7c3aed;
  --color-gradient-purple: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);

  /* Borders & shadows */
  --color-border: #e2e8f0;
  --color-border-pastel: #bedbff;  /* soft blue — popular card ring */
  --color-border-faint: #eef1f6;   /* very pale grey — resting card/form border (1px) */
  --color-border-hover: #d7dee8;   /* slightly darker grey — card hover border (1px) */
  --shadow-card: 0 1px 3px rgba(30, 58, 138, 0.06);
  --shadow-card-hover: 0 6px 16px rgba(30, 58, 138, 0.08);
  --shadow-pop: 0 16px 36px rgba(30, 64, 175, 0.18);

  /* Animated tagline word */
  --color-type: #7c3aed;

  /* Typography */
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;

  /* Spacing */
  --spacing-section: 6rem;       /* symmetric top/bottom — the section standard */
  --spacing-container: 1.5rem;

  /* Radii */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-pill: 9999px;

  /* Layout */
  --nav-height: 4rem;
  --container-max: 88rem;

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --ease-spring: cubic-bezier(0.34, 1.25, 0.64, 1); /* soft spring (gentle overshoot) */
}