/* ==========================================================================
   SRVC Design System — Colors & Type Tokens
   IWJ-SRVC · Agence immobilière · Bruxelles
   ========================================================================== */

/* ---- Fonts (charte SRVC adaptée, esthétique éditoriale conservée) ------
   Headings (h1/h2/h3) : Cormorant Garamond — serif éditorial, look luxe
   Eyebrows / chiffres : Barlow Condensed — fallback DAX OT Cond
   Corps de texte      : Roboto — officiel charte SRVC
   ----------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Barlow+Condensed:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

:root {
  /* ============================================================
     PALETTE OFFICIELLE SRVC (depuis le PDF de charte graphique)
     Utilisée AVEC PARCIMONIE — pas de rouge envahissant
     ============================================================ */

  /* ---- COULEURS PRIMAIRES ---------------------------------------------- */
  --srvc-red-primary: #e1242e;   /* rouge SRVC — réservé accents ponctuels */
  --srvc-navy-primary:#13284b;   /* navy SRVC — texte, titres, CTA primary */

  /* ---- ACCENT DYNAMIQUE (palette) — par défaut brun taupe en mode jour ----- */
  --srvc-red-dynamic: #8b7966;

  /* ---- ROUGE D'URGENCE (sémaphorique, NON contrôlé par la palette) ------ */
  --srvc-emergency:       #E63946;
  --srvc-emergency-light:  #FF6B7A;
  --srvc-emergency-soft:   #FFB4BB;

  /* ---- COULEURS SECONDAIRES -------------------------------------------- */
  --srvc-gray-light:  #e0e0e0;
  --srvc-blue-gray:   #8092a5;
  --srvc-blue-deep:   #4d6681;

  /* ---- COULEURS D'ACCENTUATION (charte SRVC) -------------------------- */
  --srvc-accent-brown: #8b7966;
  --srvc-accent-orange:#f2863d;
  --srvc-accent-lime:  #c3c643;
  --srvc-accent-blue:  #1483c5;
  --srvc-accent-teal:  #80d0dd;
  --srvc-accent-slate: #69737c;

  /* ---- ALIASES rétro-compatibilité ------------------------------------- */
  --srvc-navy:        var(--srvc-navy-primary);
  --srvc-navy-900:    #0c1c39;
  --srvc-navy-700:    #2a3e63;
  --srvc-red:         var(--srvc-red-primary);
  --srvc-red-soft:    #ef5660;

  /* ---- Accent "ochre" historique (le doré du site original)
     -> remappé sur le rouge SRVC pour matcher la charte, mais utilisé
        UNIQUEMENT comme accent ponctuel sur le mot clé du h1
        (place / Syndic / Promoteur / méritez). Le reste du site reste
        dans les tons navy/cream/beige éditorial. ----------------------- */
  --srvc-ochre:       var(--srvc-red-primary);
  --srvc-ochre-soft:  #d4b887;          /* beige doré pour décors discrets */
  --srvc-ochre-deep:  var(--srvc-red-primary);

  /* ---- Neutrals chauds (look brochure haut-de-gamme — base d'origine) - */
  --srvc-bone:        #F6F1E8;
  --srvc-bone-2:      #EFE7D8;
  --srvc-cream:       #FBF8F2;
  --srvc-paper:       #FFFFFF;
  --srvc-stone-100:   #E8E2D5;
  --srvc-stone-200:   #D4CCBA;
  --srvc-stone-400:   #9A917E;
  --srvc-stone-600:   #5F5849;
  --srvc-ink:         #1A1A1A;
  --srvc-ink-muted:   #4A4A4A;
  --srvc-ink-soft:    #6B6B6B;

  /* ---- Semantic foreground / background ------------------------------- */
  --bg-page:          var(--srvc-bone);
  --bg-surface:       var(--srvc-paper);
  --bg-elevated:      var(--srvc-cream);
  --bg-inverse:       var(--srvc-navy);

  --fg-primary:       var(--srvc-ink);
  --fg-secondary:     var(--srvc-ink-muted);
  --fg-muted:         var(--srvc-ink-soft);
  --fg-inverse:       var(--srvc-cream);
  --fg-accent:        var(--srvc-navy);
  --fg-accent-warm:   var(--srvc-ochre-deep);

  --border-hairline:  rgba(26, 26, 26, 0.10);
  --border-soft:      rgba(26, 26, 26, 0.06);
  --border-strong:    rgba(26, 26, 26, 0.18);
  --border-inverse:   rgba(251, 248, 242, 0.18);

  /* ---- Typography ------------------------------------------------------
     --font-serif : titres h1/h2/h3 — Cormorant Garamond (look éditorial)
     --font-cond  : eyebrows, sous-titres, chiffres — Barlow Condensed (DAX)
     --font-sans  : corps de texte — Roboto (officiel charte SRVC)
   ---------------------------------------------------------------------- */
  --font-serif:       'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-cond:        'Barlow Condensed', 'Oswald', 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --font-sans:        'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-display:     var(--font-serif);
  --font-mono:        'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Scale — conservative, editorial */
  --text-xs:          12px;
  --text-sm:          14px;
  --text-base:        16px;
  --text-md:          18px;
  --text-lg:          20px;
  --text-xl:          24px;
  --text-2xl:         32px;
  --text-3xl:         44px;
  --text-4xl:         60px;
  --text-5xl:         84px;

  --leading-tight:    1.15;
  --leading-snug:     1.3;
  --leading-normal:   1.55;
  --leading-relaxed:  1.7;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-widest:  0.22em;   /* eyebrow labels, real-estate style      */

  /* ---- Spacing (8pt based) -------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---- Radius (conservative, 4–8px max per brief) -------------------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ---- Elevation — subtle, brochure-like ----------------------------- */
  --shadow-xs: 0 1px 2px rgba(30, 42, 74, 0.04);
  --shadow-sm: 0 2px 8px rgba(30, 42, 74, 0.06);
  --shadow-md: 0 6px 24px rgba(30, 42, 74, 0.08);
  --shadow-lg: 0 16px 48px rgba(30, 42, 74, 0.12);
  --shadow-inset: inset 0 0 0 1px rgba(26, 26, 26, 0.06);

  /* ---- Motion --------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-entrance: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:      140ms;
  --dur-med:       240ms;
  --dur-slow:      420ms;

  /* ---- Layout --------------------------------------------------------- */
  --container-narrow: 720px;
  --container-normal: 1120px;
  --container-wide:   1320px;
  --gutter:           clamp(20px, 4vw, 48px);
}

/* ==========================================================================
   Semantic type classes
   ========================================================================== */

/* ---- Eyebrows : Barlow Condensed (DAX), uppercase, large tracking ---- */
.srvc-eyebrow {
  font-family: var(--font-cond);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--srvc-red-primary);
}

/* ---- Display & H1 : retour au serif éditorial Cormorant ---- */
.srvc-display {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--srvc-navy-primary);
}

h1, .srvc-h1, .srvc-h1-xl {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--srvc-navy-primary);
  margin: 0;
}

h2, .srvc-h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  color: var(--srvc-navy-primary);
  margin: 0;
}

h3, .srvc-h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--srvc-navy-primary);
  margin: 0;
}

h4, .srvc-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: 0;
  color: var(--srvc-navy-primary);
  margin: 0;
}

.srvc-quote {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--fg-accent);
}

p, .srvc-p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
  margin: 0;
  text-wrap: pretty;
}

.srvc-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-primary);
}

.srvc-small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}

.srvc-legal {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
  letter-spacing: 0.01em;
}

code, .srvc-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--fg-accent);
}