/* ================================================================
   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);

  /* ── Layout ───────────────────────────────────────────────── */
  --sidebar-w:    220px;
}


/* ================================================================
   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); }


/* ================================================================
   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;
}

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

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