:root {
  /* ---- Neutral ramp. Lumen is a neutral-first system: 95% of every screen is
     white, three greys and near-black. Colour appears only as data. ---- */
  --white: #ffffff;
  --gray-25: #fbfbfb;
  --gray-50: #f8f8f8;
  --gray-100: #f1f1f3;
  --gray-150: #ebebee;
  --gray-200: #e4e4e6;
  --gray-300: #d4d4d8;
  --gray-400: #bdbdc3;
  --gray-500: #9b9ba1;
  --gray-600: #71717a;
  --gray-700: #52525b;
  --gray-800: #3f3f46;
  --gray-900: #27272a;
  --gray-950: #18181b;
  --ink-900: #09090b;
  --ink: #000000;

  /* ---- Data accents. Measured off the source screenshot. ---- */
  --orange-500: #f97316;
  --orange-600: #e2620b;
  --orange-100: #ffe8d4;
  --amber-500: #eab308;
  --amber-100: #fdf3cf;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-100: #d6f5e2;
  --red-500: #ef4444;
  --red-100: #fde0e0;

  /* ---- Avatar / category tints. Pale fill, near-black initials. ---- */
  --tint-lime: #ddf0b1;
  --tint-yellow: #fbf08a;
  --tint-cyan: #a9f2fb;
  --tint-blue: #c8d0ed;
  --tint-violet: #ded8fb;
  --tint-pink: #fbccd8;

  /* ---- Semantic surfaces ---- */
  --surface-desk: var(--gray-25);      /* page behind the app shell */
  --surface-shell: var(--gray-100);    /* app canvas + sidebar, one continuous grey */
  --surface-card: var(--white);        /* every panel */
  --surface-sunken: var(--gray-150);   /* chart tracks, meter rails */
  --surface-muted: var(--gray-100);    /* chips, active nav pill, current page */
  --surface-inverse: var(--ink-900);   /* primary buttons, dark data bars */

  /* ---- Semantic text ---- */
  --text-strong: var(--ink-900);       /* KPI figures, primary button label */
  --text-body: var(--gray-950);        /* card titles, names */
  --text-secondary: var(--gray-700);   /* nav items, table headers */
  --text-muted: var(--gray-500);       /* sub-labels, captions, placeholders */
  --text-faint: var(--gray-400);       /* axis ticks */
  --text-on-inverse: var(--white);
  --text-positive: var(--green-600);
  --text-negative: var(--red-500);

  /* ---- Semantic borders ---- */
  --border-subtle: var(--gray-100);    /* table row rules, dividers */
  --border-default: var(--gray-200);   /* input + secondary button outline */
  --border-strong: var(--gray-300);
  --border-focus: var(--ink-900);
  --border-invalid: var(--red-500);

  /* ---- Data series, in the order charts should consume them ---- */
  --series-1: var(--ink-900);
  --series-2: var(--orange-500);
  --series-3: var(--amber-500);
  --series-4: var(--gray-400);
  --series-5: var(--green-500);
}