/* ══════════════════════════════════════════════════════════════════════════
   bulfuzz design tokens — v1 (2026-08-31)

   The ONE place the design system is written down. Before this file every
   app re-declared ~30 hex values inline, which is why the a11y pass and the
   token-drift pass each had to sweep all ten surfaces to change one colour.

   Scope is deliberately narrow: custom properties, the body base, and the
   two a11y primitives every app was duplicating (focus ring, reduced
   motion). Component CSS stays inside each app — the single-file rule is
   about behaviour and layout, not about re-typing the palette.

   ⚠️  /assets/* is served `max-age=31536000, immutable` (vercel.json), so
   changing this file does NOT reach browsers. Bump the filename to bf-v2.css
   and update the <link> in all 12 surfaces, exactly as fonts.css requires.

   ── DESIGN DIRECTION: mono + monochrome ──────────────────────────────────
   Type    system monospace for Latin UI, labels and every figure.
           Arabic has no system mono, so it falls through the same stack to
           Thmanyah Sans — one stack, correct per script, no new font asset.
           Verse and editorial keep Thmanyah Serif (--font-serif).
   Colour  four warm neutrals + one green. The five per-app hues survive as
           --marker only: a hairline rule or a dot, never a filled surface,
           never type. Semantic pos/neg/warn are DATA, not decoration, and
           are the one place colour is allowed to carry meaning.
   Shape   3/5/8px radii and hairline borders. Shadows are not used to
           separate surfaces; borders are.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── type ──────────────────────────────────────────────────────────────
     Latin resolves to the platform mono (Consolas on Windows, SF Mono on
     macOS); Arabic glyphs aren't in those faces, so they fall through to
     Thmanyah Sans. Per-glyph fallback does the script split for free. */
  --font-ui: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
             'Liberation Mono', 'Thmanyah Sans', monospace;
  --font-serif: 'Thmanyah Serif', Georgia, serif;
  --font-sans: 'Thmanyah Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Tahoma, sans-serif;

  /* ── neutrals (light) ──────────────────────────────────────────────────
     Warm, not grey — the beige ground is bulfuzz's signature and reads as
     one hue family, which is what makes the palette monochrome already. */
  --bg:        #F1EFEA;

  --ground:    #F1EFEA;   /* same value, safe to alias when an app shadows --bg */
  --surface:   #FFFFFF;
  --surface-2: #F7F6F2;
  --surface-3: #EBE8E1;
  --line:      #E2DFD8;
  --line-2:    #CFCCC3;

  --ink:   #1A1A18;
  --ink-2: #55544D;
  --ink-3: #6E6E68;   /* WCAG-verified tertiary — do NOT lighten */

  /* ── accent ────────────────────────────────────────────────────────────
     --accent carries white text (5.9:1). --accent-2 is 3.4:1 on white:
     dots, rules and icon strokes only, never type. */
  --accent:   #0F6E56;
  --accent-2: #1D9E75;
  --accent-tint: rgba(15,110,86,.08);
  /* Text/icons ON an --accent fill. Must flip with the theme: white reads 5.9:1
     on the light accent but only ~2.3:1 on the lighter dark-mode green, so a
     hardcoded #fff button label is unreadable in dark. */
  --on-accent: #FFFFFF;

  /* ── semantic: information, not styling ────────────────────────────────
     P&L direction, alert severity. Never reach for these decoratively. */
  --pos:  #0F6E56;
  --neg:  #A32D2D;
  --warn: #8A5A0E;
  --pos-tint:  rgba(15,110,86,.09);
  --neg-tint:  rgba(163,45,45,.08);
  --warn-tint: rgba(138,90,14,.09);

  /* Official brand colour, deliberately exempt from the monochrome rule: a
     LinkedIn link genuinely is LinkedIn's mark. Nothing else may use it. */
  --brand-li: #0A66C2;

  /* ── per-app markers: hairlines and dots only ──────────────────────────
     Kept so an app is identifiable at a glance without colouring its UI. */
  --m-wallet:  #185FA5;
  --m-bots:    #B4620A;
  --m-scout:   #BE123C;
  --m-vantage: #0E7490;
  --m-hajes:   #4A3F94;
  --m-hub:     #0F6E56;

  /* ── shape & rhythm ────────────────────────────────────────────────────*/
  --r1: 3px;   /* chips, dots, tiny controls */
  --r2: 5px;   /* buttons, inputs */
  --r3: 8px;   /* cards, panels, modals */

  --sp1: 6px;
  --sp2: 10px;
  --sp3: 16px;
  --sp4: 24px;
  --sp5: 36px;

  color-scheme: light;
}

/* Dark, for viewers on the default "system" setting. Guarded so an explicit
   light choice still wins over a dark OS. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:        #14130F;

    --ground:    #14130F;   /* same value, safe to alias when an app shadows --bg */
    --surface:   #1C1B16;
    --surface-2: #23221C;
    --surface-3: #2A2822;
    --line:      #302E27;
    --line-2:    #454239;

    --ink:   #F2F0E8;
    --ink-2: #B4B0A4;
    --ink-3: #8D8A7F;

    --accent:   #3FBE92;
    --accent-2: #54CCA1;
    --accent-tint: rgba(63,190,146,.11);
    --on-accent: #0A1F18;

    --pos:  #3FBE92;
    --neg:  #E5736F;
    --warn: #D9A44A;
    --pos-tint:  rgba(63,190,146,.11);
    --neg-tint:  rgba(229,115,111,.11);
    --warn-tint: rgba(217,164,74,.11);

    --brand-li: #58A6F0;


    --m-wallet:  #74AEEC;
    --m-bots:    #F0A951;
    --m-scout:   #F0798F;
    --m-vantage: #54C4DC;
    --m-hajes:   #A096EE;
    --m-hub:     #3FBE92;

    color-scheme: dark;
  }
}

/* Explicit dark choice — beats a light OS. Same tokens as above; both blocks
   are required because :root[data-theme] and the media query cover different
   viewer states (stamped vs. un-stamped document). */
:root[data-theme="dark"]{
  --bg:        #14130F;

  --ground:    #14130F;   /* same value, safe to alias when an app shadows --bg */
  --surface:   #1C1B16;
  --surface-2: #23221C;
  --surface-3: #2A2822;
  --line:      #302E27;
  --line-2:    #454239;

  --ink:   #F2F0E8;
  --ink-2: #B4B0A4;
  --ink-3: #8D8A7F;

  --accent:   #3FBE92;
  --accent-2: #54CCA1;
  --accent-tint: rgba(63,190,146,.11);
  --on-accent: #0A1F18;

  --pos:  #3FBE92;
  --neg:  #E5736F;
  --warn: #D9A44A;
  --pos-tint:  rgba(63,190,146,.11);
  --neg-tint:  rgba(229,115,111,.11);
  --warn-tint: rgba(217,164,74,.11);

  --brand-li: #58A6F0;


  --m-wallet:  #74AEEC;
  --m-bots:    #F0A951;
  --m-scout:   #F0798F;
  --m-vantage: #54C4DC;
  --m-hajes:   #A096EE;
  --m-hub:     #3FBE92;

  color-scheme: dark;
}

/* ── base ───────────────────────────────────────────────────────────────
   Loaded before each app's inline <style>, so an app can still override
   any of this at equal specificity. Mono runs ~8% wider than the old sans
   at the same size, hence the 14px base. */
*{box-sizing:border-box;margin:0;padding:0}

body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Mono is uniform-width by construction, so columns of figures line up on
   their own — the thing Thmanyah could not do (it ships no `tnum`, and its
   digits vary from 378 to 660 units). This class marks the intent anyway,
   so a future non-mono figure still aligns. */
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* Editorial / verse opt-outs from the mono stack. */
.serif{font-family:var(--font-serif)}
.sans{font-family:var(--font-sans)}

/* ── a11y primitives ────────────────────────────────────────────────────
   Both were previously injected by a duplicated IIFE in every app. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r1);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* Wide content must scroll inside its own box, never the page body. */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}