/* ============================================================
   SILLAGE CLUB — Colors & Type foundations
   Réseau d'entraide pour entrepreneurs qui construisent
   depuis Marseille.
   ------------------------------------------------------------
   Source : design system Sillage (colors_and_type.css).
   Les polices (Merriweather, Instrument Sans, Shantell Sans) sont chargées
   depuis Google Fonts via <link> dans chaque page HTML.
   ============================================================ */

:root {
  /* ---- CORE BRAND (extracted from SILLAGE.fig) ---- */
  --blue:        #0062A2;   /* Bleu Sillage — primary */
  --yellow:      #FFC500;   /* Jaune Soleil — secondary / accent */

  /* ---- BLUE SCALE (built around #0062A2) ---- */
  --blue-900:    #00263F;   /* Encre — deepest, near-black navy */
  --blue-800:    #00314F;   /* Ink — primary text on light */
  --blue-700:    #004876;
  --blue-600:    #0062A2;   /* = --blue */
  --blue-500:    #1E7FBE;
  --blue-400:    #4FA0D2;   /* sea / lighter accent */
  --blue-300:    #8FC2E2;
  --blue-200:    #C5E0F0;
  --blue-100:    #E6F1F8;   /* wash background */
  --blue-050:    #F2F8FC;

  /* ---- YELLOW / SUN SCALE ---- */
  --yellow-700:  #C28C00;   /* deep amber — text-safe on light */
  --yellow-600:  #F2A900;   /* amber */
  --yellow-500:  #FFC500;   /* = --yellow */
  --yellow-400:  #FFD64D;
  --yellow-200:  #FFEDA8;
  --yellow-100:  #FFF6D6;   /* soft sun wash */

  /* ---- WARM ACCENTS (from Marseille / café palette) ---- */
  --coral:       #F2A88E;   /* terracotta peach */
  --coral-deep:  #D9714E;
  --terracotta:  #B5532E;
  --cacao:       #6E3B23;   /* warm brown */

  /* ---- NEUTRALS (warm-leaning) ---- */
  --white:       #FFFFFF;
  --cream:       #FFFCF4;   /* warm paper — default page bg */
  --sand:        #F7F1E6;   /* warm panel */
  --grey-100:    #F1EEE8;
  --grey-200:    #E3DED4;
  --grey-300:    #CFC9BD;
  --grey-400:    #A89F8F;
  --grey-500:    #7C7466;
  --grey-600:    #57514A;
  --black:       #1A1814;

  /* ---- SEMANTIC ---- */
  --bg:              var(--cream);
  --bg-alt:          var(--blue-050);
  --bg-invert:       var(--blue-800);
  --surface:         var(--white);
  --surface-warm:    var(--sand);

  --fg:              var(--blue-800);   /* primary text */
  --fg-muted:        var(--grey-600);   /* secondary text */
  --fg-subtle:       var(--grey-500);   /* tertiary / captions */
  --fg-on-blue:      #FFFFFF;
  --fg-on-yellow:    var(--blue-800);

  --primary:         var(--blue-600);
  --primary-hover:   var(--blue-700);
  --primary-press:   var(--blue-800);
  --accent:          var(--yellow-500);
  --accent-hover:    var(--yellow-600);

  --border:          var(--grey-200);
  --border-strong:   var(--grey-300);
  --border-blue:     var(--blue-200);

  --success:         #2E8B57;
  --danger:          #C0392B;

  /* ---- TYPE FAMILIES ---- */
  --font-display: "Merriweather", "Georgia", "Times New Roman", serif;
  --font-body:    "Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-hand:    "Shantell Sans", "Instrument Sans", cursive; /* decorative accent only — logo uses the real SVG */

  /* ---- TYPE SCALE (clamped, fluid) ---- */
  --text-xs:    0.75rem;   /* 12 */
  --text-sm:    0.875rem;  /* 14 */
  --text-base:  1rem;      /* 16 */
  --text-md:    1.125rem;  /* 18 */
  --text-lg:    1.375rem;  /* 22 */
  --text-xl:    1.75rem;   /* 28 */
  --text-2xl:   2.25rem;   /* 36 */
  --text-3xl:   3rem;      /* 48 */
  --text-4xl:   clamp(2.75rem, 5vw, 4.25rem);
  --text-5xl:   clamp(3.5rem, 7vw, 6rem);

  /* ---- WEIGHTS ---- */
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-extra:    800;

  /* ---- RADII ---- */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* ---- SPACING (4px base) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---- SHADOWS (soft, warm, low-contrast) ---- */
  --shadow-sm:  0 1px 2px rgba(0, 49, 79, 0.06), 0 1px 3px rgba(0, 49, 79, 0.08);
  --shadow-md:  0 4px 12px rgba(0, 49, 79, 0.08), 0 2px 4px rgba(0, 49, 79, 0.05);
  --shadow-lg:  0 12px 32px rgba(0, 49, 79, 0.12), 0 4px 8px rgba(0, 49, 79, 0.06);
  --shadow-blue:0 12px 28px rgba(0, 98, 162, 0.22);

  /* ---- MOTION ---- */
  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   140ms;
  --dur:        240ms;
  --dur-slow:   420ms;
}