/* ============================================================
   Befimmo — Colour palette
   Source: Befimmo Brand Refresh 2024 — "01 Streamlining colour palette"
   Primary: black + signature Befimmo red.
   Secondary: warm neutrals + a red tonal range.
   ============================================================ */

:root {
  /* ---- Brand primaries ---- */
  --befimmo-black: #000000;       /* RVB 0/0/0    — primary ink */
  --befimmo-red: #ff232c;         /* RVB 255/35/44 — signature red (theme accent1) */

  /* ---- Red tonal range (secondary) ---- */
  --red-900: #8b161f;             /* deepest red, press states (theme accent2) */
  --red-700: #bf1f2b;             /* hover / secondary red (theme accent3) */
  --red-500: #ff232c;             /* = brand red, primary accent */
  --red-200: #ff9c9c;             /* soft red / tints (theme accent4) */

  /* ---- Warm neutral range (secondary) ---- */
  --paper: #f1efee;               /* page background */
  --sand-100: #e3e1dc;            /* cards, fills (theme accent5) */
  --sand-300: #b5b3ae;            /* borders, muted text (theme accent6) */
  --white: #ffffff;
  --grey-cc: #cccccc;             /* theme dk2 — dividers */
  --grey-e2: #e2e3e3;             /* theme lt2 — light fills */

  /* ---- Extended ink steps (derived, harmonious) ---- */
  --ink-900: #000000;
  --ink-700: #2b2b2b;
  --ink-500: #555452;
  --ink-300: #8c8a85;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */

  /* Surfaces */
  --surface-page: var(--paper);
  --surface-card: var(--white);
  --surface-sunken: var(--sand-100);
  --surface-inverse: var(--befimmo-black);
  --surface-accent: var(--befimmo-red);

  /* Text */
  --text-strong: var(--befimmo-black);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-subtle: var(--sand-300);
  --text-on-accent: var(--white);
  --text-on-inverse: var(--paper);
  --text-accent: var(--befimmo-red);

  /* Borders & lines */
  --border-strong: var(--befimmo-black);
  --border-default: var(--sand-300);
  --border-subtle: var(--sand-100);
  --hairline: rgba(0, 0, 0, 0.12);

  /* Interactive (accent) */
  --accent: var(--befimmo-red);
  --accent-hover: var(--red-700);
  --accent-press: var(--red-900);
  --accent-soft: var(--red-200);

  /* Focus */
  --focus-ring: var(--befimmo-red);
}