/* MarginSheet design tokens
   Single source of truth. Every surface consumes this file.
   Light is the default; [data-theme="dark"] on <html> overrides.
   ------------------------------------------------------------------
   THE RED TOKEN: --ms-red / --ms-red-dark.
   Reserved exclusively for negative financial facts: Overspent,
   negative Margin, carried interest. It is NEVER used for errors,
   warnings, alerts, destructive controls, validation, required
   fields, or emphasis of any kind, anywhere in this product.
   Our-fault errors use --ms-amber. Anything asking for the
   household's attention uses --ms-brand. Anything informational
   uses --ms-muted. If you reach for red for a UI state, the answer
   is one of those three instead.
   ------------------------------------------------------------------ */

:root {
  /* Surfaces */
  --ms-paper:        #FBF7F0;  /* page background */
  --ms-rail:         #F7F1E6;  /* nav rail background */
  --ms-card:         #FFFEF9;  /* raised sheet, drawers */
  --ms-card2:        #FFFEF9;
  --ms-wash1:        #F4EFE6;  /* banded section background */
  --ms-wash2:        #F2ECE1;
  --ms-hover:        rgba(33,28,21,0.04);

  /* Ink */
  --ms-ink:          #211C15;  /* primary text */
  --ms-muted2:       #6E6455;  /* secondary text */
  --ms-muted:        #948A79;  /* labels, meta, disabled-looking text */

  /* Lines */
  --ms-border:       #E7DFCE;  /* structural hairline */
  --ms-border2:      rgba(76,42,107,0.16);
  --ms-border3:      #F0E9DB;  /* light row divider */
  --ms-track:        #EFE8D8;  /* progress / chart track */

  /* Brand, aubergine */
  --ms-brand:        #4C2A6B;  /* wordmark, h1/h2, buttons, verdict rules, chart lines */
  --ms-brand-hover:  #6B3FA0;  /* link + control hover */
  --ms-brand-wash:   rgba(76,42,107,0.06);
  --ms-brand-wash-active: rgba(76,42,107,0.09);

  /* Semantic financial fills. Meaning is fixed; do not reuse. */
  --ms-red:          #9E3B2B;  /* NEGATIVE FINANCIAL FACTS ONLY */
  --ms-green:        #6F7B41;  /* Kept */
  --ms-olive:        #6F7B41;
  --ms-tan:          #C4A46A;  /* sand, spending */
  --ms-amber:        #B58A3E;  /* our-fault system state, never financial */
  --ms-amber-ink:    #8A6420;  /* amber text on paper, contrast-safe */

  /* Type */
  --ms-font-ui:     'Instrument Sans', system-ui, -apple-system, sans-serif;
  --ms-font-doc:    'Source Serif 4', Georgia, serif;
  --ms-fs-11:  11.5px;  /* micro meta */
  --ms-fs-12:  12.5px;  /* meta, timestamps */
  --ms-fs-13:  13px;    /* eyebrow, secondary nav */
  --ms-fs-14:  14px;
  --ms-fs-15:  14.5px;  /* nav item, body small */
  --ms-fs-16:  15.5px;  /* body */
  --ms-fs-18:  17px;    /* lead */
  --ms-fs-21:  21px;    /* h3 */
  --ms-fs-26:  26px;    /* h2 */
  --ms-fs-31:  31px;    /* figure, mobile */
  --ms-fs-46:  46px;    /* hero figure, desktop */
  --ms-w-reg:  400;
  --ms-w-semi: 600;     /* figures and h2 only */
  --ms-lh-tight: 1.25;
  --ms-lh-body:  1.6;
  --ms-tnum: tabular-nums;

  /* Spacing, 2px base */
  --ms-sp-1:  2px;
  --ms-sp-2:  4px;
  --ms-sp-3:  8px;
  --ms-sp-4:  10px;
  --ms-sp-5:  14px;
  --ms-sp-6:  18px;
  --ms-sp-7:  24px;
  --ms-sp-8:  32px;
  --ms-sp-9:  44px;
  --ms-sp-10: 56px;

  /* Radii */
  --ms-r-sm:   4px;   /* default: buttons, inputs, bands, sheets */
  --ms-r-md:   9px;   /* app mark only */
  --ms-r-pill: 999px; /* avatar, toggle, dot */

  /* Shadows: the product has none. Depth is hairlines and air. */
  --ms-shadow-none: none;
  --ms-scrim: rgba(33,28,21,0.28);  /* the one exception: drawer scrim */

  /* Layout */
  --ms-rail-w:           220px;
  --ms-rail-w-collapsed: 72px;
  --ms-tabbar-h:         54px;
  --ms-hit-min:          44px;  /* hard floor on every interactive target */
  --ms-bp-mobile:        700px; /* the only breakpoint */
}

html[data-theme="dark"] {
  --ms-paper:  #191512;
  --ms-rail:   #141110;
  --ms-card:   #251F18;
  --ms-card2:  #251F18;
  --ms-wash1:  rgba(251,247,240,0.05);
  --ms-wash2:  rgba(251,247,240,0.055);
  --ms-hover:  rgba(251,247,240,0.07);
  --ms-ink:    #F0EAE0;
  --ms-muted2: #B9AF9E;
  --ms-muted:  #9B9182;
  --ms-border:  rgba(251,247,240,0.16);
  --ms-border2: rgba(251,247,240,0.13);
  --ms-border3: rgba(251,247,240,0.10);
  --ms-track:   rgba(251,247,240,0.12);
  --ms-brand:       #B295DB;
  --ms-brand-hover: #C9B2E8;
  --ms-brand-wash:  rgba(178,149,219,0.10);
  --ms-brand-wash-active: rgba(178,149,219,0.16);
  --ms-red:       #D4735F;
  --ms-green:     #A6B472;
  --ms-olive:     #A6B472;
  --ms-tan:       #D9BE91;
  --ms-amber:     #DDB863;
  --ms-amber-ink: #DDB863;
  --ms-scrim: rgba(0,0,0,0.45);
}