/* ═══════════════════════════════════════════════════════════════════
   TOKENS.CSS · Foundation Layer
   ───────────────────────────────────────────────────────────────────
   Shared design tokens used across every app in the suite.
   Per-app theming is handled by theme-*.css files that override
   the accent ramp variables only. Everything else lives here.
   
   Load order:
     1. tokens.css          (this file)
     2. theme-[name].css    (one theme per app)
     3. components.css      (component styles)
   
   Version 1.0 · April 2026
   ═══════════════════════════════════════════════════════════════════ */


:root {

  /* ─── Surfaces · Day ─────────────────────────────────────────────
     REFRESH: canvas deepened a few points and chrome pulled below it so
     the near-white raised cards actually lift (raised vs page went from
     ~+7 to ~+11 luma). Day was clean but flat; this gives it the same
     perceptible elevation the night fix gave, staying in the bone family. */
  --surface-page:        #F1ECE2;   /* Bone · page canvas */
  --surface-elevated:    #EAE4D7;   /* Clay Light · nav, topbar (frames content) */
  --surface-flat:        #E5DFD1;   /* Clay · borderless cards */
  --surface-raised:      #FCFBF7;   /* Linen · raised cards — brightest */
  --surface-divider:     #D3CCBB;   /* Clay Deep · inset wells */

  /* ─── Text · Day ─────────────────────────────────────────────── */
  --text-primary:        #1F1E1A;   /* Ink · 16.1:1 on bone */
  --text-secondary:      #5A5548;   /* Stone · 8.1:1 on bone */
  --text-tertiary:       #8A8578;   /* Ash · 4.7:1 on bone · AA */
  --text-muted:          #B8B09C;   /* Mist · 2.6:1 · display only, never below 18px */
  --text-on-dark:        #F4F1EB;   /* Bone used as text on ink surfaces */

  /* ─── Borders · Day ──────────────────────────────────────────── */
  --border-rest:         #D0C9B7;   /* 0.5px default (firmed for card definition) */
  --border-hover:        #8A8578;   /* 0.5px interactive hover */
  --border-selected:     #1F1E1A;   /* 1px selected / active */

  /* ─── Spacing scale ──────────────────────────────────────────── */
  --space-1:             4px;
  --space-2:             8px;
  --space-3:             12px;
  --space-4:             16px;
  --space-5:             20px;
  --space-6:             24px;
  --space-8:             32px;
  --space-10:            40px;
  --space-12:            48px;
  --space-16:            64px;

  /* ─── Radii ──────────────────────────────────────────────────── */
  --radius-sm:           2px;       /* checkbox */
  --radius-md:           4px;       /* buttons, inputs, small cards */
  --radius-lg:           8px;       /* standard cards */
  --radius-xl:           10px;      /* composite cards */
  --radius-pill:         9999px;    /* badges, toggles, status pills */

  /* ─── Typography ─────────────────────────────────────────────── */
  --font-sans:           'Satoshi', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --weight-regular:      400;
  --weight-medium:       500;

  --size-display:        44px;
  --size-title:          22px;
  --size-heading:        14px;
  --size-body:           13px;
  --size-small:          12px;
  --size-tiny:           11px;
  --size-label:          10px;
  --size-eyebrow:        9.5px;

  --track-display:       -0.035em;
  --track-title:         -0.02em;
  --track-body:          -0.005em;
  --track-eyebrow:       0.18em;
  --track-uppercase:     0.14em;

  --line-heading:        1.05;
  --line-body:           1.6;
  --line-tight:          1;

  /* ─── Motion ─────────────────────────────────────────────────── */
  --ease:                cubic-bezier(0.2, 0, 0, 1);

  --motion-micro:        120ms;     /* hover, focus, toggle */
  --motion-short:        200ms;     /* cards, borders, buttons */
  --motion-medium:       380ms;     /* panels, drawers, reveals */
  --motion-long:         560ms;     /* page transitions, staggered reveals */
  --motion-breath:       2400ms;    /* life-pulse indicator */

  /* ─── Grain (applied to canvas only) ─────────────────────────── */
  --grain-opacity:       0.04;

  /* ─── Semantic colors (status) ───────────────────────────────── */
  --status-live:         #4B6B5A;   /* same as moss accent */
  --status-paused:       #8A8578;   /* ash */
  --status-processing:   #2E5266;   /* slate */
  --status-attention:    #B89060;   /* honey */
  --status-error:        #8A2E2E;   /* cinnabar */
  --status-draft:        #B8B09C;   /* mist */

  /* ─── Badge pigments (day) ───────────────────────────────────── */
  --badge-approved-bg:   #DCE4D3;
  --badge-approved-bd:   #B4C5A5;
  --badge-approved-tx:   #2E4A38;

  --badge-progress-bg:   #F0E4C8;
  --badge-progress-bd:   #D4BE88;
  --badge-progress-tx:   #6B5020;

  --badge-rejected-bg:   #EFD4D2;
  --badge-rejected-bd:   #D4A0A0;
  --badge-rejected-tx:   #6B1A1A;

  --badge-draft-bg:      #EAE1D0;
  --badge-draft-bd:      #C8B894;
  --badge-draft-tx:      #3A3028;

  --badge-neutral-bg:    #EAE6DC;
  --badge-neutral-tx:    #1F1E1A;

  /* ─── Layout dimensions ──────────────────────────────────────── */
  --nav-width:           180px;
  --nav-collapsed:       52px;
  --topbar-height:       44px;

  /* ─── Accent variables (set by theme files, defaults to moss) ── */
  --accent:              #4B6B5A;
  --accent-2:            #718C73;
  --accent-3:            #9AAE8B;
  --accent-4:            #C1A87A;
  --accent-5:            #7A5E3A;
  --accent-name:         'moss';
}


/* ═══════════════════════════════════════════════════════════════════
   Dark mode · Night
   Activated by `data-theme="night"` on <html> or <body>.
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="night"] {

  /* ─── Surfaces · Night ────────────────────────────────────────
     REFRESH: elevation was inverted (raised #1F1D17 sat BELOW the
     #1A1815 canvas — "looking into shadow"). On this compressed
     near-black ramp the delta was ~5 luma points, so raised cards
     visually dissolved into the page and the whole UI read as flat.
     Restored to conventional dark-mode elevation so hierarchy is
     perceptible. Token names and roles unchanged. Backwards-compatible.

     HUE: held near-neutral (ashen). Warm taupe reads fine at near-black
     but turns olive/yellow — "sickly" — as it lightens, so the R–B
     spread here is capped at ~6. The register is barren cold stone, not
     warm loam: drab and lifeless on purpose, just not jaundiced. */
  --surface-page:        #171716;   /* Ash black · page canvas */
  --surface-flat:        #1D1D1C;   /* Ash · borderless cards / subtle fills */
  --surface-elevated:    #222220;   /* Ash Light · nav, topbar chrome */
  --surface-raised:      #292927;   /* Slate ash · raised cards — highest layer, pops off canvas */
  --surface-divider:     #383733;   /* Ash Deep · inset wells + hairlines */

  /* ─── Text · Night ─────────────────────────────────────────────
     REFRESH: tertiary/muted lifted for legibility AND de-warmed to a
     neutral ash so quiet labels don't carry the olive cast. Primary/
     secondary stay warm parchment — cream text reads as intentional,
     never sickly. */
  --text-primary:        #EFEDE6;   /* Parchment · ~14:1 on ash */
  --text-secondary:      #C6C2BA;   /* Flax · neutralised a touch */
  --text-tertiary:       #918D86;   /* Ash grey · ~5.4:1 · AA */
  --text-muted:          #666259;   /* Stone · display only */
  --text-on-dark:        #171716;   /* Ash used as text on bright accent fills */

  /* ─── Borders · Night ──────────────────────────────────────────
     REFRESH: the system separates surfaces with 0.5px hairlines and
     nothing else. At #2E2C27 those hairlines were nearly invisible
     on dark, so cards had no defined edge. Lifted to #3A362C — still
     a hairline, now one you can actually see. This does the elevation
     work that shadows are (correctly) forbidden from doing. */
  --border-rest:         #383733;
  --border-hover:        #8C8A85;
  --border-selected:     #EFEDE6;

  /* ─── Grain ─────────────────────────────────────────────────── */
  --grain-opacity:       0.06;

  /* ─── Status (night) ─────────────────────────────────────────────
     REFRESH: these carry DATA meaning (negative dollars, attention
     flags), not decoration. At the old muted values a loss like
     ($323,869) rendered as a dim rose that read the same as neutral
     text — the single most important signal on a financial ledger,
     invisible. Raised to values that actually register as red/amber
     while staying warm and non-alarming. Function, not paint. */
  --status-live:         var(--accent);
  --status-paused:       #918D86;
  --status-processing:   #7BA0B8;
  --status-attention:    #E2B074;
  --status-error:        #E0736B;
  --status-draft:        #666259;

  /* ─── Badge pigments (night) ─────────────────────────────────── */
  --badge-approved-bg:   #2A3A2E;
  --badge-approved-bd:   #4A6B55;
  --badge-approved-tx:   #B4C5A5;

  --badge-progress-bg:   #3A2F1A;
  --badge-progress-bd:   #6B5020;
  --badge-progress-tx:   #D4BE88;

  --badge-rejected-bg:   #3A1F1E;
  --badge-rejected-bd:   #6B2E2C;
  --badge-rejected-tx:   #D4A0A0;

  --badge-draft-bg:      #2A2620;
  --badge-draft-bd:      #4A4238;
  --badge-draft-tx:      #C4BEB0;

  --badge-neutral-bg:    #2A261E;
  --badge-neutral-tx:    #F0EDE3;
}


/* ═══════════════════════════════════════════════════════════════════
   Respect user preference for reduced motion
   ═══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-micro:   0ms;
    --motion-short:   0ms;
    --motion-medium:  0ms;
    --motion-long:    0ms;
  }
}
/* ============================================================
   Bf MARK — MDD-D4 (S391-ACCOUNTS-FILTER)
   Append to tokens.css (or load after it).

   The Bf mark signifies a Baseforce-modeled financial construct,
   not a GAAP-accepted principle. Reserved EXCLUSIVELY for:
     • Bf Operating Income
     • Bf Operating Margin %
     • Bf Enterprise Value
     • Bf Weighted Deal Value
   Never applied to derived arithmetic (Value Change, Revenue
   Retention), sourced facts (Open Deal Value, Acquisition Cost),
   counts, or calendar figures. Net Revenue exempt.

   Single token, no per-surface drift. Satoshi carries no italic
   axis at loaded weights (400/500), so the browser synthesizes
   the italic. Slight tracking keeps it reading as a deliberate
   mark rather than a rendering artifact.

   Usage:  B<span class="bf-mark">f</span> Operating Income
   ============================================================ */

.bf-mark {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: italic;              /* browser-synthesized italic */
  letter-spacing: 0.01em;
  margin-right: 0.04em;            /* optical gap before next word */
}

/* Inside tabular/accounting contexts (walkdown tables), inherit
   weight so the mark doesn't fight tabular-numeral rows */
.accounting-table .bf-mark,
.ledger-column-header .bf-mark {
  font-weight: inherit;
}