/* ───────────────────────────────────────────────────────────────
   Freedcamp — Color tokens
   A clean, light productivity palette: white surfaces, cool-gray
   neutrals, a confident blue primary, and a friendly green accent.
   Base ramps first, then semantic aliases.
   ─────────────────────────────────────────────────────────────── */
:root {
  /* ---- Brand blue (primary action / links / selection) ---- */
  --blue-700: #2448b1;
  --blue-600: #2f6fe0;
  --blue-500: #4a86f7; /* primary */
  --blue-400: #6f9ff8;
  --blue-300: #a3c2fb;
  --blue-200: #c8dbfd;
  --blue-100: #edf3fe; /* tint background */

  /* ---- Brand green (success / positive / Freedcamp accent) ---- */
  --green-700: #438a62;
  --green-600: #5aa873;
  --green-500: #83bf6e; /* accent */
  --green-400: #97c98a;
  --green-200: #cfe7c5;
  --green-100: #eef7e9;

  /* ---- Red (danger / overdue / destructive) ---- */
  --red-700: #b23a34;
  --red-500: #d94841;
  --red-300: #e79ca5;
  --red-100: #fdecec;

  /* ---- Orange (warning / medium priority / coral avatars) ---- */
  --orange-600: #e0704a; /* coral — default avatar fill */
  --orange-500: #f2a84c;
  --orange-300: #f7c98c;
  --orange-100: #fef6ed;

  /* ---- Cyan / Pink / Yellow (status & label accents) ---- */
  --cyan-500: #57b6f0;
  --cyan-100: #e8f5fd;
  --pink-500: #d34b6a;
  --pink-400: #e283ae;
  --pink-100: #fdedf2;
  --yellow-400: #fadd6f;
  --yellow-100: #fef9e6;

  /* ---- Neutral ramp (cool gray, blue-tinted) ---- */
  --white: #ffffff;
  --gray-50: #f5f7fa; /* app background */
  --gray-100: #ebeef2; /* hover / subtle fill */
  --gray-150: #e0e3e6; /* light border */
  --gray-200: #c9cccf; /* border */
  --gray-300: #a5adc5;
  --gray-400: #969db3; /* muted text */
  --gray-500: #6a7185; /* secondary text */
  --gray-600: #5d6678; /* dense secondary text — field values in task/record editing rows */
  --gray-700: #4a4f5c;
  --gray-900: #35353d; /* primary text (near-black) */
  --black: #000000;

  /* Extra neutrals used in dense editing rows (Add/Edit Task and similar) */
  --gray-250: #b2bdd4; /* divider between stacked field rows */
  --gray-450: #8894ad; /* field labels / tertiary text, once a row is filled */

  /* ───────────── Semantic aliases ───────────── */
  --color-primary: var(--blue-500);
  --color-primary-hover: var(--blue-600);
  --color-primary-active: var(--blue-700);
  --color-primary-tint: var(--blue-100);
  --color-accent: var(--green-500);
  --color-accent-strong: var(--green-700);

  --color-success: var(--green-600);
  --color-success-tint: var(--green-100);
  --color-warning: var(--orange-500);
  --color-warning-tint: var(--orange-100);
  --color-danger: var(--red-500);
  --color-danger-tint: var(--red-100);
  --color-info: var(--cyan-500);
  --color-info-tint: var(--cyan-100);

  /* Surfaces */
  --surface-app: var(--gray-50);
  --surface-card: var(--white);
  --surface-sunken: var(--gray-100);
  --surface-hover: var(--gray-100);
  --surface-selected: var(--blue-100);

  /* Text */
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-500);
  --text-muted: var(--gray-400);
  --text-on-primary: var(--white);
  --text-link: var(--blue-500);

  /* Borders */
  --border-subtle: var(--gray-150);
  --border-default: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-focus: var(--blue-500);

  /* Avatar default fill (Freedcamp coral) */
  --avatar-bg: var(--orange-600);
}