/* ============================================================================
   tokens.css — every colour, type size, radius and spacing value from the
   design, as custom properties.

   The oklch() values are transcribed EXACTLY from the design (console.dc.html
   lines 1019-1040). Do not approximate them to hex: oklch is what the design
   specifies and what keeps the status hues perceptually even.

   FAINT (#667085) is a TEXT colour and clears 4.5:1 on white.
   HAIRLINE (#98a2b3) measures 2.58:1 and is for borders and rules ONLY.
   Never set type to --hairline.
   ========================================================================== */

:root {
  /* ---- ink ---------------------------------------------------------- */
  --ink:        #17202a;   /* headings, primary type                      */
  --mid:        #344054;   /* secondary type, control labels              */
  --muted:      #667085;   /* tertiary type                               */
  --faint:      #667085;   /* SAME as muted, deliberately — see header    */
  --body:       #475467;   /* long-form body copy, panel notes            */
  --hairline:   #98a2b3;   /* BORDERS AND RULES ONLY — never type         */

  /* ---- surfaces and rules ------------------------------------------- */
  --bg:         #f6f7f9;   /* app background                              */
  --surface:    #ffffff;   /* cards, top bar, panel                       */
  --sunken:     #f2f4f7;   /* segmented control track, neutral tag        */
  --rule:       #e4e7ec;   /* card border, top-bar border                 */
  --rule-soft:  #f2f4f7;   /* table row rule, panel row rule              */
  --rule-hover: #d0d5dd;   /* border colour on hover                      */
  --scroll:     #d0d5dd;   /* scrollbar thumb                             */

  /* ---- channel accents ---------------------------------------------- */
  --c1p:        oklch(0.5 0.16 275);   /* indigo — Vendor Central / 1P    */
  --c3p:        oklch(0.6 0.1 195);    /* teal   — Seller Central / 3P    */
  --c-walmart:  oklch(0.65 0.14 240);  /* the second market's dot         */
  --c1p-3p:     linear-gradient(135deg, oklch(0.5 0.16 275) 50%, oklch(0.6 0.1 195) 50%);

  /* ---- status fills (chart marks, dots, bars) ----------------------- */
  --good:       oklch(0.6 0.14 150);   /* green  — healthy                */
  --warn:       oklch(0.7 0.14 80);    /* amber  — paced                  */
  --bad:        oklch(0.55 0.18 25);   /* red    — failed                 */
  --info:       oklch(0.5 0.16 275);   /* indigo — live / derived         */

  /* ---- status foregrounds (type on light fills) --------------------- */
  --fg-good:    oklch(0.42 0.12 150);
  --fg-warn:    oklch(0.45 0.12 70);
  --fg-bad:     oklch(0.48 0.16 25);
  --fg-info:    oklch(0.42 0.14 275);
  --fg-teal:    oklch(0.4 0.09 195);
  --fg-neut:    #475467;

  /* ---- status tag pairs (T_GOOD / T_WARN / T_BAD / T_INFO / T_TEAL /
         T_NEUT). Background + foreground, always used together. ------- */
  --tag-good-bg: oklch(0.95 0.05 150);
  --tag-good-fg: oklch(0.42 0.12 150);
  --tag-warn-bg: oklch(0.96 0.05 80);
  --tag-warn-fg: oklch(0.45 0.12 70);
  --tag-bad-bg:  oklch(0.96 0.04 25);
  --tag-bad-fg:  oklch(0.48 0.16 25);
  --tag-info-bg: oklch(0.95 0.04 275);
  --tag-info-fg: oklch(0.42 0.14 275);
  --tag-teal-bg: oklch(0.95 0.03 195);
  --tag-teal-fg: oklch(0.4 0.09 195);
  --tag-neut-bg: #f2f4f7;
  --tag-neut-fg: #475467;

  /* ---- delta pairs (D_UP / D_DOWN / D_FLAT) ------------------------- */
  --delta-up-bg:   oklch(0.95 0.05 150);
  --delta-up-fg:   oklch(0.42 0.12 150);
  --delta-down-bg: oklch(0.96 0.04 25);
  --delta-down-fg: oklch(0.48 0.16 25);
  --delta-flat-bg: #f2f4f7;
  --delta-flat-fg: #475467;

  /* ---- source badges: which system stated the figure ---------------- */
  --src-api-bg: oklch(0.95 0.04 275);
  --src-api-fg: oklch(0.42 0.14 275);
  --src-erp-bg: #f2f4f7;
  --src-erp-fg: #475467;

  /* ---- links and selection ------------------------------------------ */
  --link:       oklch(0.45 0.16 275);
  --link-hover: oklch(0.38 0.17 275);
  --focus:      oklch(0.5 0.16 275);
  --select:     oklch(0.5 0.16 275 / .18);

  /* ---- type --------------------------------------------------------- */
  --font: "Libre Franklin", Helvetica, Arial, sans-serif;
  --fs-10:   10px;     /* tab badge                                     */
  --fs-105:  10.5px;   /* pill count, panel row key                     */
  --fs-11:   11px;     /* "Signed in as", kpi label                     */
  --fs-12:   12px;     /* controls, meta                                */
  --fs-125:  12.5px;   /* team banner, panel value rows, buttons        */
  --fs-13:   13px;     /* base                                          */
  --fs-14:   14px;
  --fs-145:  14.5px;   /* brand                                         */
  --fs-15:   15px;     /* panel title, icon size                        */
  --fs-17:   17px;     /* screen heading                                */
  --fs-20:   20px;     /* panel headline figure                         */
  --fs-24:   24px;     /* kpi figure                                    */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --tracking-tight: -0.015em;
  --tracking-tighter: -0.02em;
  --tracking-caps: .03em;
  --lh-tight: 1.25;
  --lh-body:  1.45;
  --lh-note:  1.55;

  /* ---- radii -------------------------------------------------------- */
  --r-2:  2px;    /* square channel dot                                 */
  --r-6:  6px;    /* segmented control button                           */
  --r-7:  7px;    /* brand mark                                         */
  --r-8:  8px;    /* button, segmented track, card inner                */
  --r-10: 10px;   /* card, panel note                                   */
  --r-20: 20px;   /* pill                                               */
  --r-full: 999px;

  /* ---- spacing ------------------------------------------------------ */
  --s-2:  2px;
  --s-4:  4px;
  --s-6:  6px;
  --s-7:  7px;
  --s-8:  8px;
  --s-9:  9px;
  --s-11: 11px;
  --s-12: 12px;
  --s-13: 13px;
  --s-14: 14px;
  --s-16: 16px;
  --s-20: 20px;
  --s-24: 24px;

  /* ---- elevation and geometry --------------------------------------- */
  --lift:  0 1px 2px rgba(16, 24, 40, .08);
  --panel-w: 340px;
  --app-min-w: 1340px;
}