/**
 * Design Tokens & CSS Custom Properties
 * Exact visual identity of https://eglise.catholique.fr/
 */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Montserrat:wght@500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,400&display=swap');

:root {
  /* Authentic French Catholic Blue Brand Palette (from eglise.catholique.fr) */
  --cef-blue-header: #2462A5;
  --cef-blue-header-dark: #1E538D;
  --cef-blue-header-gradient: linear-gradient(180deg, #2462A5 0%, #1E5591 100%);
  --cef-blue-primary: #2462A5;
  --cef-blue-dark: #1B4573;
  --cef-blue-light: #3D7EC7;
  --cef-blue-soft: #EBF3FC;
  --cef-blue-subtle: #F3F8FD;

  /* Liturgical Gold & Yellow Accent (from eglise logo fish center) */
  --cef-gold: #E5A910;
  --cef-gold-light: #F4C430;
  --cef-gold-soft: #FEF9E7;

  /* Neutrals & Surfaces */
  --cef-bg-canvas: #FFFFFF;
  --cef-bg-surface: #FFFFFF;
  --cef-bg-muted: #F1F4F7;
  --cef-bg-subtle: #E2E8F0;
  --cef-border: #D8DFE6;
  --cef-border-strong: #B4C2D1;
  --cef-border-card: #CBD5E1;

  /* Typography Colors */
  --cef-text-main: #1A2533;
  --cef-text-secondary: #334155;
  --cef-text-muted: #64748B;
  --cef-text-blue: #2462A5;
  --cef-text-inverse: #FFFFFF;

  /* Typography Families matching reference */
  --cef-font-title: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --cef-font-serif: 'Playfair Display', Georgia, serif;
  --cef-font-body: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Spatial & Grid Tokens */
  --cef-container-max: 960px;
  --cef-container-wide: 960px;
  --cef-gap-sm: 0.75rem;
  --cef-gap-md: 1.25rem;
  --cef-gap-lg: 2rem;
  --cef-gap-xl: 2.5rem;

  /* Shadows */
  --cef-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --cef-shadow-md: 0 4px 10px rgba(0, 0, 0, 0.08);
  --cef-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);
  --cef-shadow-card: 0 2px 8px rgba(36, 98, 165, 0.08);

  /* Radii */
  --cef-radius-sm: 4px;
  --cef-radius-md: 6px;
  --cef-radius-lg: 8px;
  --cef-radius-full: 9999px;

  /* Transition Speeds */
  --cef-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}