/* ============================================================
   COLORS
   Editorial customer-service palette: warm cream ground,
   charcoal ink, a single confident accent orange.
   Base values first, then semantic aliases.
   ============================================================ */

:root {
  /* --- Base: ink (charcoal greys, warm) --- */
  --ink-900: #111111;
  --ink-700: #313130;
  --ink-500: #626260;
  --ink-400: #7b7b78;
  --ink-300: #9c9fa5;
  --white: #ffffff;
  --black: #000000;

  /* --- Base: warm cream surfaces --- */
  --cream-50: #ffffff;   /* pure white card surface */
  --cream-100: #f5f1ec;  /* canvas — the brand-defining ground */
  --cream-200: #ebe7e1;  /* surface-2 / soft hairline */
  --cream-300: #d3cec6;  /* hairline */

  /* --- Base: accent --- */
  --accent-500: #ff5600; /* Fin Orange — the AI-product accent */
  --accent-600: #fe4c02; /* report orange (in-product) */
  --brand-blue: #0007cb; /* saturated brand blue (illustrations only) */

  /* --- Base: report / analytics palette (in-product mockups only) --- */
  --report-blue: #65b5ff;
  --report-green: #0bdf50;
  --report-pink: #ff2067;
  --report-lime: #b3e01c;
  --report-cyan: #03b2cb;

  /* --- Base: semantic --- */
  --red-600: #c41c1c;
  --green-500: #0bdf50;

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

  /* Surfaces */
  --canvas: var(--cream-100);          /* default page background */
  --surface-1: var(--cream-50);        /* floating white cards */
  --surface-2: var(--cream-200);       /* tinted cards, alt rows */
  --inverse-canvas: var(--black);      /* quote / callout strip */
  --inverse-surface-1: var(--ink-700); /* hovered footer items in dark */

  /* Lines */
  --hairline: var(--cream-300);        /* 1px card borders */
  --hairline-soft: var(--cream-200);   /* faq + footer dividers */

  /* Text */
  --ink: var(--ink-900);               /* headlines, body, labels */
  --ink-muted: var(--ink-500);         /* secondary meta */
  --ink-subtle: var(--ink-400);        /* tertiary / footer */
  --ink-tertiary: var(--ink-300);      /* disabled, footnotes */
  --on-primary: var(--white);          /* text on charcoal */
  --inverse-ink: var(--white);         /* white on black */
  --inverse-ink-muted: var(--ink-300); /* light grey on black */

  /* Brand / accent */
  --primary: var(--ink-900);           /* SYSTEM PRIMARY is charcoal */
  --fin-orange: var(--accent-500);     /* AI product accent only */

  /* Semantic */
  --error: var(--red-600);
  --success: var(--green-500);
}