/* ============================================================
   Crédit Agricole Immobilier — "Léa" · Design Tokens
   Brand: Crédit Agricole green · fresh, premium, trustworthy
   Green: #008556 · Leaf: #7AB648 · Deep ink-green: #0e2a20
   Fonts: Fraunces (display, warm serif) · DM Sans (body)
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap");

:root {
  /* ---------- BRAND CORE (Crédit Agricole Immobilier) ---------- */
  --ca-dark:       #0e2a20;   /* primary — wordmark, headlines, deep surfaces */
  --ca-deep:       #08201a;   /* deepest dark surface */
  --ca-mid:        #15392c;   /* mid-dark panels / gradient stop */
  --ca-green:      #008556;   /* CA primary green */
  --ca-green-600:  #006B47;   /* darker green — hover / pressed */
  --ca-green-800:  #004D33;   /* deep green anchor */
  --ca-green-light:#3FAE7E;   /* warm highlight — lighter green (on dark) */
  --ca-leaf:       #7AB648;   /* fresh leaf accent */
  --ca-mist:       #eaf4ee;   /* faintest mint wash */

  /* ---------- SECONDARY & STATUS ---------- */
  --emerald:       #2e7d3c;
  --emerald-600:   #1f5c2a;
  --emerald-bg:    #e6f4e9;
  --emerald-fg:    #1a5526;
  --rose:          #b84040;
  --rose-bg:       #fce9e9;
  --rose-fg:       #8a2c2c;
  --amber:         #c87820;
  --amber-bg:      #fdf3e0;
  --amber-fg:      #8b5500;
  --sapphire:      #3a68b4;
  --sapphire-bg:   #e8eef9;

  /* ---------- TINTS & SURFACES ---------- */
  --green-tint:    #eaf4ee;   /* mint card wash */
  --green-stage:   #0c241b;   /* dark green-tinted stage */
  --warm-mist:     #eef3ef;

  --surface-0:     #ffffff;
  --surface-1:     #f8faf8;   /* near-white page base, faint green */
  --surface-2:     #eef3ef;   /* subtle green-grey section */
  --surface-glass: rgba(253,255,254,0.82);

  /* ---------- INK (TEXT) ---------- */
  --ink:           #14211c;   /* primary text — near-black green-tint */
  --ink-soft:      #2f3b35;   /* secondary text */
  --ink-muted:     #6a736e;   /* tertiary / captions */
  --ink-faint:     #a3aaa5;   /* disabled / placeholder */
  --ink-line:      #e2ebe5;   /* hairline borders */
  --ink-on-dark:   #eaf4ee;   /* text on dark surfaces */

  /* ---------- SEMANTIC STATUS ---------- */
  --success:       #2e7d3c;
  --success-bg:    #e6f4e9;
  --success-fg:    #1a5526;
  --warning:       #c87820;
  --warning-bg:    #fdf3e0;
  --warning-fg:    #8b5500;
  --danger:        #b84040;
  --danger-bg:     #fce9e9;
  --danger-fg:     #8a2c2c;
  --info:          #3a68b4;
  --info-bg:       #e8eef9;
  --info-fg:       #2a4e8c;

  /* ---------- GRADIENTS (minimal — prefer solids) ---------- */
  --grad-brand:      #0e2a20;
  --grad-brand-soft: #15392c;
  --grad-green:      #008556;
  --grad-leaf:       #7AB648;
  --grad-emerald:    #2e7d3c;
  --grad-page:       #f8faf8;
  --grad-hero:       transparent;

  /* ---------- TYPE ---------- */
  --font-sans:    "DM Sans", system-ui, -apple-system, sans-serif;
  --font-display: "Fraunces", "Garamond", "Georgia", serif;
  --font-mono:    ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  /* ---------- TYPE SCALE ---------- */
  --fs-display: 64px;
  --fs-h1:      44px;
  --fs-h2:      32px;
  --fs-h3:      24px;
  --fs-title:   20px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-xs:      13px;
  --fs-2xs:     11px;

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-normal:  1.5;
  --lh-relaxed: 1.62;

  --tracking-display: -0.02em;
  --tracking-tight:   -0.012em;
  --tracking-caps:    0.14em;

  /* ---------- RADII ---------- */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px;
  --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px;

  /* ---------- SPACING ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs:    0 1px 2px rgba(14,42,32,0.06);
  --shadow-soft:  0 6px 24px rgba(14,42,32,0.08), 0 1px 2px rgba(14,42,32,0.04);
  --shadow-card:  0 12px 40px rgba(14,42,32,0.10), 0 2px 6px rgba(14,42,32,0.05);
  --shadow-lift:  0 24px 70px rgba(14,42,32,0.15), 0 4px 12px rgba(14,42,32,0.07);
  --shadow-glow:  0 18px 60px rgba(0,133,86,0.26);
  --shadow-glow-green: 0 16px 50px rgba(0,133,86,0.22);
  --shadow-glass: 0 24px 80px rgba(14,42,32,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
  --ring-focus:   0 0 0 3px rgba(0,133,86,0.30);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    160ms;
  --dur-base:    280ms;
  --dur-slow:    520ms;
}

/* ============================================================ SEMANTIC ELEMENTS */

body {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--surface-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--ca-dark);
}
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
h2, .h2 { font-weight: 500; font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--ink); }
h3, .h3 { font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--ink); }
.title  { font-weight: 600; font-size: var(--fs-title); line-height: var(--lh-snug); color: var(--ink); }
p, .body { font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--ink-soft); }
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--ink-soft); }
.caption { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--ink-muted); }
.eyebrow, .label-caps {
  font-size: var(--fs-2xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--ink-muted);
}
code, .mono { font-family: var(--font-mono); font-size: var(--fs-xs); }
a { color: var(--ca-green-600); text-decoration: none; }
a:hover { color: var(--ca-green-800); }