/* Meidar — Color tokens
   Brand orange sampled directly from the Meidar "M" monogram:
   light #F79535 → mid #F36F27 → deep #EF5524 (the dot). Paired with a warm-neutral
   ink scale and a warm off-white paper for a confident, premium real-estate feel. */

:root {
  /* ---- Brand orange ---- */
  --orange-50:  #FEF4EC;
  --orange-100: #FDE6D3;
  --orange-200: #FACBA2;
  --orange-300: #F7AC6E;
  --orange-400: #F58D46;
  --orange-500: #F26C22; /* primary brand */
  --orange-600: #E2551A; /* hover / the dot's deep tone */
  --orange-700: #BC4412;
  --orange-800: #8F340D;
  --orange-900: #5E2308;

  /* Signature monogram gradient */
  --brand-gradient: linear-gradient(150deg, #F89A38 0%, #F26C22 52%, #EF5524 100%); /* @kind color */
  --brand-gradient-soft: linear-gradient(150deg, #FBE9D6 0%, #FAD3B3 100%); /* @kind color */

  /* ---- Warm-neutral ink ---- */
  --ink-950: #15161A; /* primary text */
  --ink-900: #1F2024;
  --ink-800: #2E3036;
  --ink-700: #414349;
  --ink-600: #5B5E66;
  --ink-500: #787B83;
  --ink-400: #9A9DA4;
  --ink-300: #C3C5CB;
  --ink-200: #DFE0E4;
  --ink-100: #EDEEF0;
  --ink-50:  #F6F6F8;
  --white:   #FFFFFF;
  --paper:   #FBFAF8; /* warm off-white page background */

  /* ---- Semantic status ---- */
  --success: #2E9E5B;
  --success-soft: #E5F4EB;
  --warning: #E0A100;
  --warning-soft: #FBF1D6;
  --error:   #D8472B;
  --error-soft: #FBE7E2;
  --info:    #2E6FB8;
  --info-soft: #E6EFF8;

  /* ---- Semantic aliases ---- */
  --brand: var(--orange-500);
  --brand-hover: var(--orange-600);
  --brand-active: var(--orange-700);
  --brand-fg: var(--white);

  --text-primary: var(--ink-950);
  --text-secondary: var(--ink-600);
  --text-muted: var(--ink-500);
  --text-on-brand: var(--white);
  --text-link: var(--orange-600);

  --surface-page: var(--paper);
  --surface-card: var(--white);
  --surface-sunken: var(--ink-50);
  --surface-inverse: var(--ink-950);
  --surface-brand: var(--orange-500);
  --surface-brand-soft: var(--orange-50);

  --border-subtle: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-brand: var(--orange-500);

  --focus-ring: var(--orange-400);
}
