/* ================================================================
   Mboko Core -Design Tokens
   Authoritative source. Ported from Claude design handoff 2026-05-15.
   Docs: docs/strategy/design-system/00-tokens.md
   ================================================================
   FONT: Plus Jakarta Sans -variable font (local files)
   ================================================================ */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url("../fonts/PlusJakartaSans-VariableFont_wght.310b1a7f9485.ttf") format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url("../fonts/PlusJakartaSans-Italic-VariableFont_wght.36b66648f3bc.ttf") format('truetype');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

/* ================================================================
   BASE TOKENS  (mobile-first: ≤1023 px)
   ================================================================ */
:root {

  /* ── Brand ────────────────────────────────────────────────── */
  --brand-blue:           #0B5CAD;
  --brand-green:          #22C55E;   /* logo dot only -not for UI success */

  /* ── Primary (surface-facing) ─────────────────────────────── */
  --primary:              #0A4F94;
  --primary-dark:         #083E75;
  --primary-light:        #E8F0FB;
  --primary-mid:          #2563EB;   /* rare -auth gradient stops only */

  /* ── Neutral ──────────────────────────────────────────────── */
  --bg:                   #F7F9FC;
  --body-chrome-bg:       #E8EDF3;   /* html,body page fill behind shell */
  --surface:              #FFFFFF;
  --surface-soft:         #F1F5F9;
  --table-row-hover-bg:   #F8FBFF;
  --text:                 #111827;
  --muted:                #6B7280;
  --border:               #CBD5E1;
  --divider:              #E2E8F0;
  --disabled-bg:          #94A3B8;
  --disabled-text:        #CBD5E1;

  /* ── Semantic -Success ───────────────────────────────────── */
  --success:              #15803D;
  --success-dark:         #166534;
  --success-bg:           #DCFCE7;
  --success-border:       #86EFAC;
  --success-bg-hover:     #C8F4D4;

  /* ── Semantic -Warning ───────────────────────────────────── */
  --warning:              #B45309;
  --warning-bg:           #FEF3C7;
  --warning-border:       #FCD34D;

  /* ── Semantic -Error ─────────────────────────────────────── */
  --error:                #B91C1C;
  --error-dark:           #991B1B;
  --error-bg:             #FEE2E2;
  --error-border:         #FCA5A5;
  --error-bg-hover:       #FBD5D5;

  /* ── Semantic -Info ──────────────────────────────────────── */
  --info:                 #0369A1;
  --info-bg:              #E0F2FE;
  --info-border:          #7DD3FC;

  /* ── Draft / Unsaved state ──────────────────────────────────
     Accepted 2026-05-15. Independent from --admin-accent-*;
     draft = unsaved/dirty state, admin = permission boundary. */
  --draft:                #7C3AED;
  --draft-bg:             #EDE9FE;
  --draft-border:         #DDD6FE;
  --draft-dark:           #6D28D9;

  /* ── On-dark alpha tokens ─────────────────────────────────
     Accepted 2026-05-15. Replaces 53 ad-hoc rgba whites in auth.css. */
  --on-dark-50:           rgba(255,255,255,0.50);
  --on-dark-64:           rgba(255,255,255,0.64);
  --on-dark-75:           rgba(255,255,255,0.75);
  --on-dark-85:           rgba(255,255,255,0.85);
  --on-dark-90:           rgba(255,255,255,0.90);

  /* ── Overlay / Scrim ──────────────────────────────────────── */
  --scrim-overlay:        rgba(10, 20, 40, 0.7);
  --on-warning-bar-border: rgba(255,255,255,0.25);
  --on-warning-bar-text-muted: rgba(255,255,255,0.85);

  /* ── Admin surface ────────────────────────────────────────── */
  --admin-accent:         #7C3AED;
  --admin-accent-dark:    #6D28D9;
  --admin-accent-bg:      #F5F3FF;
  --admin-accent-border:  #C4B5FD;
  --admin-bg:             #1F2937;
  --admin-bg-hover:       #374151;
  --admin-fg:             #E5E7EB;
  --admin-fg-muted:       #6B7280;

  /* ── Typography ───────────────────────────────────────────── */
  --font:                 'Plus Jakarta Sans', sans-serif;

  /* Type scale */
  --font-size-nano:              9px;
  --font-size-micro:             10px;
  --font-size-small:             11px;
  --font-size-caption:           12px;
  --font-size-body:              0.8125rem;  /* 13px */
  --font-size-prominent:         0.875rem;   /* 14px */
  --font-size-logo-sm:           0.9375rem;  /* 15px */
  --font-size-prominent-lg:      1rem;       /* 16px */
  --font-size-logo:              1.0625rem;  /* 17px */
  --font-size-subheading:        1.125rem;   /* 18px */
  --font-size-page-title-narrow: 19px;
  --font-size-page-title:        20px;
  --font-size-stat:              1.3125rem;  /* 21px */
  --font-size-heading:           1.375rem;   /* 22px */
  --font-size-display-lg:        24px;
  --font-size-display-xl:        32px;

  /* Letter spacing */
  --letter-spacing-display:      -0.03em;
  --letter-spacing-page-title:   -0.02em;
  --letter-spacing-prominent:    -0.01em;
  --letter-spacing-label:         0.06em;
  --letter-spacing-micro-label:   0.1em;

  /* ── Spacing -8px grid (with 2px micro) ──────────────────── */
  --space-0:      2px;
  --space-1:      4px;
  --space-2:      8px;
  --space-3:      12px;
  --space-4:      16px;
  --space-5:      20px;
  --space-6:      24px;
  --space-7:      28px;
  --space-8:      32px;

  /* ── Border radius ────────────────────────────────────────── */
  --radius:       12px;  /* cards, KPI, large containers */
  --radius-md:    10px;  /* nav-link hover, avatar squares */
  --radius-sm:     8px;  /* buttons, chips, inputs */
  --radius-xs:     6px;  /* small elements, badges, form inputs */

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-sm:          0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow:             0 2px 6px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:          0 4px 16px rgba(0,0,0,0.09);
  --shadow-toggle-knob: 0 1px 2px rgba(0,0,0,0.2);

  /* ── Motion -linear +40ms steps, mirrors the --space-* scale ── */
  --duration-instant: 80ms;   /* press/active feedback */
  --duration-fast:    120ms;  /* hover, focus, small state flips */
  --duration-base:    160ms;  /* default -most component transitions */
  --duration-slow:    200ms;  /* panels, modals, drawers */

  --ease-standard:   ease;                       /* two-way hover/toggle state changes */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);  /* one-directional enter/exit (panels, modals) */

  /* ── Layout ───────────────────────────────────────────────── */
  --sidebar-w:    220px;
  /* Content-layout breakpoint (ADR-046). Documentation/JS use only -
     @media can't read a custom property, so every @media rule that
     gates on this spells out 1280px literally; keep both in sync. */
  --bp-wide:      1280px;
  /* Shared content-column cap, consumed (with their own `560px`
     fallback) by .shell-page-body and several older, feature-specific
     page wrappers (.catalog-page, .lite-content, .error-card, etc -
     grep `mobile-content-max-width` before touching any of them). Was
     never actually set before ADR-046, so every one of them silently
     fell back to its own hardcoded 560px. Defining it here changes
     nothing at this value - it only makes the existing behavior
     explicit. Do NOT widen this token itself at --bp-wide: it fans out
     to every consumer above, most of which have never been audited for
     a wider layout. .shell-page-body's own wide override lives next to
     its rule in components/46-shell-page-chrome.css instead, scoped to
     that one selector only. */
  --mobile-content-max-width: 560px;
}


/* ================================================================
   TYPE-SCALE REBIND  (≥768 px - tablet/desktop rail+sidebar shell,
   ui.desktop-app-rail's own breakpoint)
   The base scale is tuned for a phone held close to the face; a
   tablet or monitor viewed from further away reads small at the same
   px values. +1px per step (a bit more at the top of the scale)
   keeps every existing ratio/hierarchy intact - every component using
   var(--font-size-*) picks this up automatically, no per-component
   override needed.

   The nano/micro/small/caption tier (card subtitles, period-toggle
   pills, badges) gets a second +1-2px on top of that: a flat +1px is
   a much smaller RELATIVE jump at 9-12px than at body/heading size, so
   this tier still read as too small after the first pass even though
   body/KPI text (already bumped) looked right - human feedback,
   2026-09-30.
   ================================================================ */
@media (min-width: 768px) {
  :root {
    --font-size-nano:              11px;
    --font-size-micro:             12px;
    --font-size-small:             13px;
    --font-size-caption:           14px;
    --font-size-body:              0.875rem;   /* 14px */
    --font-size-prominent:         0.9375rem;  /* 15px */
    --font-size-logo-sm:           1rem;       /* 16px */
    --font-size-prominent-lg:      1.0625rem;  /* 17px */
    --font-size-logo:              1.125rem;   /* 18px */
    --font-size-subheading:        1.1875rem;  /* 19px */
    --font-size-page-title-narrow: 20px;
    --font-size-page-title:        21px;
    --font-size-stat:              1.375rem;   /* 22px */
    --font-size-heading:           1.4375rem;  /* 23px */
    --font-size-display-lg:        25px;
    --font-size-display-xl:        34px;
  }
}


/* ================================================================
   DESKTOP REBIND  (≥1024 px)
   ================================================================ */
@media (min-width: 1024px) {
  :root {
    --primary:       #0B5CAD;
    --primary-light:  #EBF3FB;
    --border:         #D1D5DB;
    --divider:        #E5E7EB;
    --text:           #1F2937;
  }
}


/* ================================================================
   SEMANTIC TYPE CLASSES  (helpers -match design system docs)
   ================================================================ */
.type-display-xl   { font-size: var(--font-size-display-xl);  font-weight: 800; letter-spacing: var(--letter-spacing-display); }
.type-display-lg   { font-size: var(--font-size-display-lg);  font-weight: 800; letter-spacing: var(--letter-spacing-display); }
.type-heading      { font-size: var(--font-size-heading);     font-weight: 800; letter-spacing: var(--letter-spacing-display); }
.type-page-title   { font-size: var(--font-size-page-title);  font-weight: 800; letter-spacing: var(--letter-spacing-page-title); }
.type-subheading   { font-size: var(--font-size-subheading);  font-weight: 700; }
.type-prominent-lg { font-size: var(--font-size-prominent-lg);font-weight: 700; }
.type-prominent    { font-size: var(--font-size-prominent);   font-weight: 600; letter-spacing: var(--letter-spacing-prominent); }
.type-body         { font-size: var(--font-size-body);        font-weight: 400; }
.type-caption      { font-size: var(--font-size-caption);     font-weight: 500; }
.type-small        { font-size: var(--font-size-small);       font-weight: 500; }
.type-micro        { font-size: var(--font-size-micro);       font-weight: 700; text-transform: uppercase; letter-spacing: var(--letter-spacing-micro-label); }
.type-nano         { font-size: var(--font-size-nano);        font-weight: 800; text-transform: uppercase; letter-spacing: var(--letter-spacing-micro-label); }

/* Secondary/de-emphasized text -shipped 2026-09-11 per
   docs/strategy/design-system/99-proposed-extensions.md; replaces
   several `style="color: var(--muted)"` inline usages. */
.text-muted        { color: var(--muted); }
.pre-wrap          { white-space: pre-wrap; }

/* Visually hidden but screen-reader-legible -shipped 2026-09-11 per
   docs/strategy/design-system/99-proposed-extensions.md. Pairs an
   `aria-hidden="true"` icon/glyph with text a sighted user doesn't
   need but a screen reader does (e.g. "up"/"down" next to a trend
   arrow icon that already carries the meaning visually via color). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ================================================================
   RESET
   ================================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* The HTML ``hidden`` attribute must always win. Author rules like
   ``.foo { display: flex }`` override the UA stylesheet's
   ``[hidden] { display: none }`` (same specificity, author beats UA), which
   silently breaks every JS list that hides rows via ``el.hidden = true``
   (search/filter on the catalog, units, configurator picker, PO builder…).
   One !important here fixes them all instead of per-component patches. */
[hidden] {
  display: none !important;
}

/* Global reduced-motion guard. Every component transition/animation in
   static/ui/css/ runs through the --duration-*/--ease-* tokens above, so
   collapsing all of them to near-zero here is sufficient site-wide -no
   per-component opt-out needed. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html, body {
  font-family: var(--font);
  color: var(--text);
  background: var(--body-chrome-bg);
}

a {
  color: inherit;
  text-decoration: none;
}