/* ============================================================
   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);
}