/* ═══════════════════════════════════════════════════════════════════════════
   WhiteOak.IO — design tokens

   Stage 1 of the ERP design-system plan. Every enterprise finance system
   researched — SAP Fiori, Oracle Redwood, Microsoft Fluent 2, Workday Canvas —
   builds on the same three primitives: a spacing grid, a documented type ramp,
   and a small semantic colour palette used identically everywhere.

   This file adds those on top of the existing palette rather than replacing it.
   The legacy variables in wo-styles.css keep working; these map onto them so a
   module can migrate one component at a time.

   The rule that matters: components reference SEMANTIC tokens, never raw hex.
   SAP's own guidance is explicit that theme hex values change between releases,
   which is exactly why a hard-coded #059669 in a module is a liability.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Spacing — 8px grid, 4px for icons and micro-elements ─────────────────
     Workday: "we follow the 8pt Grid System… aligned our base space size to
     our base font size (16px)". Fluent uses a 4px base unit. Both agree the
     small steps are 4s and the layout steps are 8s. */
  --wo-space-0:   0;
  --wo-space-2:   2px;    /* hairline offsets, icon nudges */
  --wo-space-4:   4px;    /* icon gutters, chip padding */
  --wo-space-6:   6px;
  --wo-space-8:   8px;    /* tight internal padding */
  --wo-space-12: 12px;    /* control padding */
  --wo-space-16: 16px;    /* default block padding */
  --wo-space-20: 20px;    /* section padding */
  --wo-space-24: 24px;    /* page gutter */
  --wo-space-32: 32px;
  --wo-space-40: 40px;
  --wo-space-48: 48px;

  /* ── Type ramp — 14px base, the enterprise norm ───────────────────────────
     SAP's scale is eight sizes with step 0 = 14px. Fluent's Body 1 is 14/20.
     A finance audience reads dense tables; 14px body with 12px secondary is
     the size those systems converged on. Values are size / line-height. */
  --wo-font-ui:     'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --wo-font-mono:   'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, monospace;

  --wo-text-caption-size:   10px;  --wo-text-caption-lh:   14px;
  --wo-text-small-size:     12px;  --wo-text-small-lh:     16px;
  --wo-text-body-size:      14px;  --wo-text-body-lh:      20px;   /* default */
  --wo-text-subtitle-size:  16px;  --wo-text-subtitle-lh:  22px;
  --wo-text-h3-size:        20px;  --wo-text-h3-lh:        28px;
  --wo-text-h2-size:        24px;  --wo-text-h2-lh:        32px;
  --wo-text-h1-size:        32px;  --wo-text-h1-lh:        40px;
  --wo-text-display-size:   44px;  --wo-text-display-lh:   52px;

  --wo-weight-regular:  400;
  --wo-weight-medium:   500;
  --wo-weight-semibold: 600;
  --wo-weight-bold:     700;

  /* tracking tightens as size grows — large figures need it, small caps need
     the opposite */
  --wo-track-tight:  -0.025em;   /* display and h1 */
  --wo-track-snug:   -0.015em;   /* h2, h3, subtitle */
  --wo-track-normal:  0;
  --wo-track-caps:    0.12em;    /* mono labels in caps */

  /* ── Semantic colour — five roles, exactly as SAP and Workday define ──────
     SAP: "SAP Fiori has five semantic colors… In addition to using a color,
     you must also provide a text, such as an object status." Colour is never
     the only channel: every status carries a label, and negatives carry a
     sign as well as a hue.

     Mapped onto the platform's existing palette so nothing shifts visually. */
  /* Deepened from the platform's #059669. At 12px on white the brighter
     value falls under 4.5:1, and these render at 12px in every table cell and
     chip. --wo-positive-vivid keeps the original for large fills and charts,
     where contrast is not the constraint. */
  --wo-positive:       #0a7d55;
  --wo-positive-vivid: #059669;
  --wo-positive-dark:  #34d399;   /* legible on the inverse shell */
  --wo-positive-bg:    #e8f5ef;
  --wo-positive-bdr:   #a9dcc6;

  --wo-negative:       #c0342b;
  --wo-negative-vivid: #dc2626;
  --wo-negative-ink:   #8a231c;   /* text on --wo-negative-bg */
  --wo-negative-bg:    #fdedeb;
  --wo-negative-bdr:   #f3c0ba;

  --wo-critical:       #b5620a;
  --wo-critical-vivid: #d97706;
  --wo-critical-bg:    #fdf3e7;
  --wo-critical-bdr:   #f1d3a8;

  --wo-informative:    #1e5fbf;
  --wo-informative-vivid: #2563eb;
  --wo-informative-bg: #eaf1fd;
  --wo-informative-bdr:#b9d0f5;

  --wo-neutral:        #5b6b80;
  --wo-neutral-bg:     #f0f3f7;
  --wo-neutral-bdr:    #d4dce6;
  --wo-on-inverse:     #ffffff;

  --wo-brand:          #059669;

  /* ── Surfaces and lines ──────────────────────────────────────────────────*/
  --wo-surface-page:   #f7f8fa;
  --wo-surface-raised: #ffffff;
  --wo-surface-sunken: #f0f2f6;
  --wo-surface-inverse:#0d1219;

  --wo-line-subtle:    rgba(17,24,39,.07);
  --wo-line:           rgba(17,24,39,.12);
  --wo-line-strong:    rgba(17,24,39,.18);

  --wo-ink:            #111827;
  --wo-ink-2:          #4b5563;
  --wo-ink-3:          #8b95a5;

  /* ── Table density — two only ────────────────────────────────────────────
     SAP ships cozy (44px touch) / compact / condensed. A district finance
     office is mouse-and-keyboard on a large monitor, so the touch density is
     dead weight. Comfortable is the default; compact is for a business
     official working a long register. */
  --wo-row-comfortable: 44px;
  --wo-row-compact:     32px;

  --wo-radius-sm:  6px;
  --wo-radius:     10px;
  --wo-radius-lg:  14px;

  --wo-shadow-sm:  0 1px 2px rgba(15,23,42,.05);
  --wo-shadow:     0 1px 2px rgba(15,23,42,.05), 0 12px 28px -18px rgba(15,23,42,.24);
}

/* ── Numerals ──────────────────────────────────────────────────────────────
   Every source agrees on this and it is the fastest credibility win available:
   fixed-width figures so digits line up down a column. "$1,111.11" must not
   render narrower than "$999.99". Applied to any element carrying a figure. */
.wo-num,
.wo-table td.wo-num,
.wo-table th.wo-num {
  font-family: var(--wo-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
}

/* ── Status chip ──────────────────────────────────────────────────────────
   Defined once, in wo-floorplans.css, against the platform's own colour
   variables. Two files defining .wo-tag--negative meant the modifiers fought
   and every chip rendered grey — the status was applied and invisible, which
   is worse than no status at all.
   ------------------------------------------------------------------------ */

/* ── Canonical table ───────────────────────────────────────────────────────
   One table for every module: sticky header, right-aligned tabular numerics,
   hairline rows, a totals row that reads as a total. */
.wo-table { width:100%; border-collapse:collapse; font-size:var(--wo-text-body-size) }
.wo-table thead th {
  position:sticky; top:0; z-index:2;
  background:var(--wo-surface-raised);
  font-family:var(--wo-font-mono);
  font-size:8px; letter-spacing:var(--wo-track-caps); text-transform:uppercase;
  font-weight:var(--wo-weight-medium); color:var(--wo-ink-3);
  text-align:left; padding:var(--wo-space-8) var(--wo-space-16);
  border-bottom:1px solid var(--wo-line);
}
.wo-table tbody td {
  padding:var(--wo-space-12) var(--wo-space-16);
  border-bottom:1px solid var(--wo-line-subtle);
  line-height:var(--wo-text-body-lh);
}
.wo-table tbody tr:last-child td { border-bottom:none }
.wo-table tbody tr:hover td { background:rgba(15,23,42,.015) }
.wo-table--compact tbody td { padding:var(--wo-space-8) var(--wo-space-16) }
.wo-table tfoot td,
.wo-table tr.wo-total td {
  border-top:1.5px solid var(--wo-line-strong); border-bottom:none;
  padding-top:var(--wo-space-12); font-weight:var(--wo-weight-semibold);
}
/* an empty figure reads as a dash, never as blank */
.wo-empty::after { content:'\2013'; color:var(--wo-ink-3) }