/* ==========================================================================
   Business Flow Group — Color Tokens
   Four-color brand system: Ink, Orange, Slate, White.
   Restrained palette — let space and one accent do the work.
   ========================================================================== */

:root {
  /* ---- Brand core (from the brand board) ---- */
  --bfg-ink: #151F26;      /* primary dark — text, ink logo, dark surfaces */
  --bfg-orange: #F16234;   /* accent — the arrow, CTAs, highlights only */
  --bfg-slate: #7A90A2;    /* secondary — calm blue-grey, supporting blocks */
  --bfg-white: #FFFFFF;

  /* ---- Ink ramp (tints of the navy, for hierarchy on light bg) ---- */
  --ink-900: #0E161B;
  --ink-800: #151F26;      /* = --bfg-ink */
  --ink-700: #233038;
  --ink-600: #38474F;
  --ink-500: #51616A;
  --ink-400: #6F7F88;

  /* ---- Slate ramp ---- */
  --slate-700: #56697A;
  --slate-600: #6A7E8F;
  --slate-500: #7A90A2;    /* = --bfg-slate */
  --slate-400: #97A9B7;
  --slate-300: #B7C4CE;
  --slate-200: #D6DEE4;
  --slate-100: #EAEEF1;
  --slate-50:  #F5F7F8;

  /* ---- Orange ramp ---- */
  --orange-700: #C8451E;
  --orange-600: #DC5226;
  --orange-500: #F16234;   /* = --bfg-orange */
  --orange-400: #F47E57;
  --orange-300: #F8A283;
  --orange-100: #FCE0D6;
  --orange-50:  #FDF1EB;

  /* ---- Neutral / paper ---- */
  --paper:      #FBFBFA;   /* warm off-white page base (not sterile pure white) */
  --paper-alt:  #F5F7F8;   /* sectioning background */
  --hairline:   #E4E8EB;   /* thin dividers */

  /* ---- Semantic aliases ---- */
  --text-strong:   var(--ink-800);
  --text-body:     var(--ink-700);
  --text-muted:    var(--slate-600);
  --text-faint:    var(--slate-400);
  --text-inverse:  var(--bfg-white);
  --text-accent:   var(--orange-600);

  --surface-page:    var(--paper);
  --surface-section: var(--paper-alt);
  --surface-card:    var(--bfg-white);
  --surface-ink:     var(--bfg-ink);
  --surface-slate:   var(--bfg-slate);
  --surface-accent:  var(--bfg-orange);

  --border-default:  var(--hairline);
  --border-strong:   var(--ink-800);
  --border-slate:    var(--slate-300);
  --border-accent:   var(--bfg-orange);

  --accent:          var(--bfg-orange);
  --accent-hover:    var(--orange-600);
  --accent-press:    var(--orange-700);

  /* ---- Focus ---- */
  --focus-ring: color-mix(in srgb, var(--bfg-orange) 45%, transparent);
}