/* =========================================================
   Objectif Patrimoine Immobilier — Foundations
   Colors + Typography tokens
   ---------------------------------------------------------
   Palette derived from the brand mark:
     - Deep slate  #1D293D  (primary mark, headlines)
     - Mist slate  #90A1B9  (secondary mark, accents)
     - Paper       #F8FAFC  (light canvas in logo lockup)
   Scale extended along the Tailwind slate ramp for harmony.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  /* ---------- Brand ---------- */
  --brand-deep:    #1D293D;   /* logo dark */
  --brand-mist:    #90A1B9;   /* logo mid */
  --brand-paper:   #F8FAFC;   /* logo bg  */
  --brand-gold:    #FDC700;   /* accent — patrimony / finance warmth */

  /* ---------- Slate scale (neutrals) ---------- */
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CAD5E2;
  --slate-400: #90A1B9;
  --slate-500: #62748E;
  --slate-600: #45556C;
  --slate-700: #314158;
  --slate-800: #1D293D;
  --slate-900: #0F172B;
  --slate-950: #020617;

  /* ---------- Semantic colors ---------- */
  --bg:            var(--brand-paper);
  --bg-elevated:   #FFFFFF;
  --bg-sunken:     var(--slate-100);
  --bg-inverse:    var(--brand-deep);

  --fg:            var(--slate-900);
  --fg-muted:      var(--slate-600);
  --fg-subtle:     var(--slate-500);
  --fg-disabled:   var(--slate-400);
  --fg-inverse:    var(--brand-paper);

  --line:          var(--slate-200);
  --line-strong:   var(--slate-300);

  --accent:        var(--brand-deep);
  --accent-hover:  #11192A;
  --accent-soft:   var(--slate-100);
  --on-accent:     var(--brand-paper);

  --highlight:     var(--brand-gold);
  --highlight-soft:#FEF3C7;

  --success: #2E7D5B;
  --warning: #FDC700;
  --danger:  #B23A3A;
  --info:    var(--slate-500);

  /* ---------- Type ---------- */
  --font-sans:  'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'PT Serif', ui-serif, Georgia, 'Times New Roman', serif;
  --font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — patrimony / editorial cadence */
  --fs-display: 64px;
  --fs-h1:      48px;
  --fs-h2:      36px;
  --fs-h3:      28px;
  --fs-h4:      22px;
  --fs-lead:    20px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-caption: 12px;
  --fs-overline:11px;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:    0.04em;
  --tracking-overline:0.18em;

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

  /* ---------- Radius ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ---------- Shadow ---------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 43, 0.06);
  --shadow-sm: 0 2px 6px rgba(15, 23, 43, 0.06), 0 1px 2px rgba(15, 23, 43, 0.04);
  --shadow-md: 0 8px 18px rgba(15, 23, 43, 0.08), 0 2px 4px rgba(15, 23, 43, 0.04);
  --shadow-lg: 0 18px 40px rgba(15, 23, 43, 0.10), 0 4px 8px rgba(15, 23, 43, 0.05);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(15,23,43,0.04);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasis: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
}

/* =========================================================
   Semantic element styles
   ========================================================= */

.ds-display, .ds h1.display {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.ds h1, h1.ds {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0 0 var(--space-4);
}

.ds h2, h2.ds {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0 0 var(--space-3);
}

.ds h3, h3.ds {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0 0 var(--space-3);
}

.ds h4, h4.ds {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0 0 var(--space-2);
}

.ds .lead, p.lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.ds p, p.ds {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg);
}

.ds .small, .ds small {
  font-size: var(--fs-small);
  color: var(--fg-muted);
  line-height: var(--lh-normal);
}

.ds .caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-caption);
  color: var(--fg-subtle);
}

.ds .overline {
  font-family: var(--font-sans);
  font-size: var(--fs-overline);
  font-weight: 600;
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.ds a, a.ds {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-standard);
}
.ds a:hover { color: var(--accent-hover); }

.ds code, code.ds {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--slate-100);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}

/* =========================================================
   Base reset for design surfaces
   ========================================================= */
.ds-surface {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}