/* ============================================================
   CanadaFlorida.com — Design Tokens v1 (Direction 3)
   À importer dans Cowork comme base CSS du projet.
   ============================================================ */

:root {
  /* ----- Couleurs : neutres ----- */
  --cf-ink:        #15191C;
  --cf-ink-2:      #3A4148;
  --cf-bg:         #FAFAF7;
  --cf-bg-2:       #F2F1EB;
  --cf-surface:    #FFFFFF;
  --cf-rule:       #E4E2D9;
  --cf-rule-strong:#C8C5B5;
  --cf-muted:      #6B7177;

  /* ----- Couleurs : accents ----- */
  --cf-coral:      #C45A3D;
  --cf-coral-soft: #F4DDD0;
  --cf-navy:       #1B2A4E;
  --cf-navy-soft:  #E5E9F2;
  --cf-sage:       #3F6B52;
  --cf-sage-soft:  #DCE7DF;
  --cf-amber:      #A87F2C;
  --cf-amber-soft: #F5EAD3;

  /* ----- États ----- */
  --cf-success:    var(--cf-sage);
  --cf-warning:    var(--cf-amber);
  --cf-danger:     var(--cf-coral);

  /* ----- Typographie ----- */
  --cf-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --cf-font-sans:    'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --cf-font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Tailles desktop */
  --cf-text-h1:      72px;
  --cf-text-h2:      48px;
  --cf-text-h3:      32px;
  --cf-text-h4:      22px;
  --cf-text-lede:    20px;
  --cf-text-body:    17px;
  --cf-text-small:   14px;
  --cf-text-eyebrow: 11.5px;

  /* Line-heights */
  --cf-lh-display:   1.05;
  --cf-lh-h1:        1.00;
  --cf-lh-body:      1.55;
  --cf-lh-tight:     1.20;

  /* Letter-spacing */
  --cf-ls-h1:        -0.030em;
  --cf-ls-h2:        -0.025em;
  --cf-ls-h3:        -0.020em;
  --cf-ls-eyebrow:    0.180em;

  /* ----- Espacement ----- */
  --cf-space-1:   4px;
  --cf-space-2:   8px;
  --cf-space-3:   12px;
  --cf-space-4:   16px;
  --cf-space-5:   22px;
  --cf-space-6:   28px;
  --cf-space-8:   40px;
  --cf-space-10:  56px;
  --cf-space-14:  80px;

  --cf-section-py-desktop: 80px;
  --cf-section-px-desktop: 56px;
  --cf-section-py-mobile:  36px;
  --cf-section-px-mobile:  22px;

  /* ----- Rayons ----- */
  --cf-radius-sm:  6px;
  --cf-radius-md:  8px;
  --cf-radius-lg:  9px;
  --cf-radius-xl:  14px;
  --cf-radius-2xl: 18px;
  --cf-radius-pill:999px;

  /* ----- Ombres ----- */
  --cf-shadow-soft:  0 1px 2px rgba(0,0,0,0.06);
  --cf-shadow-card:  0 4px 12px rgba(21,25,28,0.04);

  /* ----- Transitions ----- */
  --cf-ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --cf-duration:  150ms;
}

/* ============================================================
   Mobile overrides
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --cf-text-h1:    42px;
    --cf-text-h2:    32px;
    --cf-text-h3:    23px;
    --cf-text-h4:    19px;
    --cf-text-lede:  17px;
    --cf-text-body:  17px;   /* JAMAIS sous 17px */
  }
}