/* ============================================================
   ICONIK IMMOBILIER — DESIGN SYSTEM ENTRY POINT
   Consumers link THIS file. It is import-only; all tokens and
   fonts live in the files below.
   ============================================================ */

/* ============================================================
   ICONIK IMMOBILIER — WEBFONTS
   Primary  : Arial  (system / Helvetica grotesque stack) — display & headlines
   Secondary: Poppins (Google Fonts) — body, UI, labels
   NOTE: Arial is the brand primary per the charter; it ships
   on every OS so no binary is bundled. Poppins is loaded from
   Google Fonts. If you need offline binaries, drop them in
   assets/fonts/ and replace the @import below with @font-face.
   ============================================================ */

/* devanagari */

/* latin-ext */
/* latin */
/* devanagari */

/* latin-ext */
/* latin */
/* devanagari */

/* latin-ext */

/* latin */

/* devanagari */

/* latin-ext */
/* latin */
/* devanagari */

/* latin-ext */
/* latin */
/* devanagari */

/* latin-ext */
/* latin */
/* devanagari */

/* latin-ext */
/* latin */
/* devanagari */

/* latin-ext */
/* latin */
/* devanagari */

/* latin-ext */
/* latin */
/* ============================================================
   ICONIK IMMOBILIER — COLOR TOKENS
   Brand is monochrome (black/white) anchored, with three
   division accent colors: Formation (blue), Média (orange),
   Acquisition (red). Blue is the default brand action color.
   ============================================================ */

:root {
  /* --- Ink / neutrals (the monochrome core) --- */
  --ink-1000: #0a0a0a;
  --ink-900:  #141414;  /* logo black, primary text */
  --ink-800:  #1d1d1d;
  --ink-700:  #2d2d2d;  /* dark CTA surfaces */
  --ink-600:  #4a4a4a;
  --ink-500:  #6b6b6b;  /* muted captions */
  --ink-400:  #9a9a9a;
  --ink-300:  #c8c8c8;
  --ink-200:  #e2e2e2;  /* hairline borders */
  --ink-150:  #ececec;
  --ink-100:  #f3f3f3;  /* subtle surface */
  --ink-50:   #f8f8f8;  /* page background */
  --white:    #ffffff;

  /* --- Formation (blue) --- */
  --formation-600: #1f5fe0;
  --formation-500: #3b7eff;  /* core */
  --formation-400: #6a9dff;
  --formation-200: #c2d6ff;
  --formation-100: #e3edff;
  --formation-050: #f5f9ff;  /* page wash */

  /* --- Média (orange) --- */
  --media-600: #e06400;
  --media-500: #ff7a01;  /* core */
  --media-400: #ff9c40;
  --media-200: #ffd9b0;
  --media-100: #ffeede;
  --media-050: #fff7f0;  /* page wash */

  /* --- Acquisition (red) --- */
  --acquisition-600: #c10812;
  --acquisition-500: #e30a17;  /* core */
  --acquisition-400: #f0454f;
  --acquisition-200: #f8c0c4;
  --acquisition-100: #fde3e5;
  --acquisition-050: #fff5f5;  /* page wash */

  /* --- Feedback --- */
  --success-500: #1f9d57;
  --warning-500: #f5a623;
  --danger-500:  #e30a17;
  --google-blue: #4285f4;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components.
     The --accent-* group is re-pointed per division below.
     ============================================================ */

  /* Surfaces */
  --surface-page:      var(--ink-50);
  --surface-card:      var(--white);
  --surface-raised:    var(--white);
  --surface-sunken:    var(--ink-100);
  --surface-inverse:   var(--ink-900);
  --surface-inverse-2: var(--ink-700);

  /* Text */
  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-700);
  --text-muted:    var(--ink-500);
  --text-faint:    var(--ink-400);
  --text-on-dark:  var(--white);
  --text-on-accent:var(--white);

  /* Lines */
  --border-subtle: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-card:   var(--ink-150);

  /* Accent (default = Formation blue, the brand action color) */
  --accent-500:  var(--formation-500);
  --accent-600:  var(--formation-600);
  --accent-400:  var(--formation-400);
  --accent-200:  var(--formation-200);
  --accent-100:  var(--formation-100);
  --accent-050:  var(--formation-050);
  --accent-text: var(--white);
}

/* ---- Division theming -------------------------------------
   Apply [data-division="…"] (or .theme-…) to any subtree to
   re-point the accent ramp. Components stay division-agnostic. */
[data-division="formation"], .theme-formation {
  --accent-500: var(--formation-500); --accent-600: var(--formation-600);
  --accent-400: var(--formation-400); --accent-200: var(--formation-200);
  --accent-100: var(--formation-100); --accent-050: var(--formation-050);
}
[data-division="media"], .theme-media {
  --accent-500: var(--media-500); --accent-600: var(--media-600);
  --accent-400: var(--media-400); --accent-200: var(--media-200);
  --accent-100: var(--media-100); --accent-050: var(--media-050);
}
[data-division="acquisition"], .theme-acquisition {
  --accent-500: var(--acquisition-500); --accent-600: var(--acquisition-600);
  --accent-400: var(--acquisition-400); --accent-200: var(--acquisition-200);
  --accent-100: var(--acquisition-100); --accent-050: var(--acquisition-050);
}

/* ============================================================
   ICONIK IMMOBILIER — TYPOGRAPHY TOKENS
   Two families:
   • Primary (Arial)  — headlines & display. Bold/Black, often
     ITALIC for the signature "Augmentez votre chiffre…" energy.
   • Secondary (Poppins) — body copy, UI, labels, eyebrows.
   ============================================================ */

:root {
  /* Families */
  --font-primary:   Arial, 'Helvetica Neue', Helvetica, sans-serif;     /* display / headlines */
  --font-secondary: 'Poppins', Arial, sans-serif;                        /* body / UI */
  --font-display:   var(--font-primary);
  --font-body:      var(--font-secondary);

  /* Weights */
  --fw-light:    300; /* @kind other */
  --fw-regular:  400; /* @kind other */
  --fw-medium:   500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold:     700; /* @kind other */
  --fw-extrabold:800; /* @kind other */
  --fw-black:    900; /* @kind other */

  /* Type scale (px) — display uses Arial, set tight & bold */
  --fs-display-xl: 64px;
  --fs-display-lg: 52px;
  --fs-display-md: 40px;
  --fs-h1: 34px;
  --fs-h2: 28px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-eyebrow: 12px;

  /* Line heights */
  --lh-tight:   1.04; /* @kind other */
  --lh-snug:    1.18; /* @kind other */
  --lh-heading: 1.12; /* @kind other */
  --lh-body:    1.6; /* @kind other */
  --lh-relaxed: 1.75; /* @kind other */

  /* Letter spacing */
  --ls-tight:   -0.02em; /* @kind other */
  --ls-normal:  0; /* @kind other */
  --ls-eyebrow:  0.14em; /* @kind other */
  --ls-caps:     0.08em; /* @kind other */
}

/* ============================================================
   ICONIK IMMOBILIER — SPACING & LAYOUT TOKENS
   4px base grid. The brand also uses an "x" unit (logo-derived)
   for clear-space around the logo — see --logo-clearspace.
   ============================================================ */

:root {
  --space-0:  0;
  --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;
  --space-32: 128px;

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1440px;
  --gutter: 24px;
  --section-y: 96px;

  /* Logo clear-space: minimum x/2 protection zone */
  --logo-clearspace: 0.5em;
}

/* ============================================================
   ICONIK IMMOBILIER — EFFECTS: RADIUS, SHADOW, BLUR, MOTION
   Cards are generously rounded (16–24px) with soft, low-contrast
   shadows. Buttons are full pills. Glows are tinted by accent.
   ============================================================ */

:root {
  /* Radius */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  16px;   /* default card */
  --radius-lg:  24px;   /* large feature card */
  --radius-xl:  32px;
  --radius-pill: 999px;  /* buttons, chips, badges */
  --radius-circle: 50%;

  /* Shadows — soft & diffuse, never harsh */
  --shadow-xs: 0 1px 2px rgba(20,20,20,0.04);
  --shadow-sm: 0 2px 8px rgba(20,20,20,0.06);
  --shadow-md: 0 8px 24px rgba(20,20,20,0.08);
  --shadow-lg: 0 18px 48px rgba(20,20,20,0.10);
  --shadow-card: 0 10px 30px rgba(20,20,20,0.07);
  --shadow-float: 0 24px 60px rgba(20,20,20,0.14);

  /* Accent glow (use with current --accent-500) */
  --glow-accent: 0 12px 40px -8px color-mix(in srgb, var(--accent-500) 45%, transparent);

  /* Focus ring */
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent-500) 35%, transparent);

  /* Blur (glass surfaces, sticky nav) */
  --blur-sm: 8px; /* @kind other */
  --blur-md: 16px; /* @kind other */

  /* Motion — calm, confident easing. Fades & gentle lifts. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 380ms; /* @kind other */
}