/* =========================================================================
   FundOS design-system primitives — ds-primitives.css
   The Unified Shell v3 :root token block (same values as ds-tokens.css Part 1,
   which stays verbatim; tests/test_ds_tokens.py asserts the two never drift).

   Why a second copy: ds.css's .ds-* components (status_chip, .ds-rail, ...)
   read ONLY v3 names (--fg-4, --s-2, --status-bad, ...), and ds.css loads on
   every host. ds-tokens.css cannot follow it out of _vantedge_theme.html's
   platform_embed gate: its Part 2 aliases the legacy --fundos-* / --vx-*
   names onto v3 tokens, which would repaint kela.com's brand colour teal. So
   the primitives ship here, unconditionally, and the aliases stay gated.

   Wrapped in a cascade layer on purpose. A layered declaration loses to ANY
   unlayered one at equal specificity, regardless of source order — so a page
   that defines its own --bg / --fg / --line inline (portal/base.html, the
   public KPI pages, auth/landing.html do) keeps its value, and these act as
   defaults only. Under the embed, ds-tokens.css's unlayered Part 1 re-states
   the same values after this sheet, so nothing there changes either.
   ========================================================================= */

@layer ds-primitives {
:root {
  /* =====================================================================
     COLOR — primitive scale
     A neutral ink ramp on warm paper, plus one signal accent.
     ===================================================================== */

  /* Paper (warm off-white surfaces) */
  --paper-50:  #FBFAF7;   /* page background */
  --paper-100: #F5F2EC;   /* card / raised surface */
  --paper-200: #ECE7DD;   /* hairline / subtle fill */
  --paper-300: #DDD6C7;   /* divider strong */

  /* Ink (cool near-black, warmer than pure neutral) */
  --ink-50:  #6A6E78;     /* tertiary text */
  --ink-100: #4A4E58;     /* secondary text */
  --ink-200: #2C2F38;     /* strong text */
  --ink-300: #16181F;     /* primary text / heads */
  --ink-900: #0B0C10;     /* near-black, used in dark surfaces */

  /* Signal — single brand accent. Vantedge teal, sampled from the wordmark (#0E799A). */
  --signal-50:  #E8F2F5;
  --signal-100: #C7E0E7;
  --signal-300: #5BA8BF;
  --signal-500: #0E799A;  /* primary brand — Vantedge teal */
  --signal-700: #0A5973;
  --signal-900: #073F52;

  /* Ledger green — the "agent did the thing / audit-logged" accent */
  --ledger-100: #DDEFE0;
  --ledger-500: #2F7F4F;
  --ledger-700: #1F5A37;

  /* Status */
  --status-ok:    #2F7F4F;  /* same as ledger-500 */
  --status-warn:  #B5731B;
  --status-bad:   #B23F3F;
  --status-info:  var(--signal-500);

  /* =====================================================================
     SEMANTIC TOKENS
     Use these in app code; primitives only when extending the system.
     ===================================================================== */

  /* Surfaces */
  --bg:           var(--paper-50);
  --bg-raised:    #FFFFFF;
  --bg-sunken:    var(--paper-100);
  --bg-inverse:   var(--ink-300);
  --bg-overlay:   rgba(11, 12, 16, 0.58);

  /* Foregrounds */
  --fg:           var(--ink-300);
  --fg-2:         var(--ink-200);
  --fg-3:         var(--ink-100);
  --fg-4:         var(--ink-50);
  --fg-on-dark:   var(--paper-50);
  --fg-on-signal: #FFFFFF;

  /* Lines & borders */
  --line:         var(--paper-200);
  --line-strong:  var(--paper-300);
  --line-inverse: rgba(255, 255, 255, 0.10);

  /* Brand */
  --brand:        var(--signal-500);
  --brand-hover:  var(--signal-700);
  --brand-soft:   var(--signal-50);
  --brand-on:     #FFFFFF;

  /* Focus / selection */
  --focus-ring:   color-mix(in oklab, var(--signal-500) 55%, transparent);
  --selection:    color-mix(in oklab, var(--signal-500) 18%, transparent);

  /* =====================================================================
     TYPE — families
     Display: Instrument Serif (italics carry the brand voice — "*fund managers.*")
     Body / UI: Inter (substitution; flagged — confirm)
     Mono / data: JetBrains Mono
     ===================================================================== */
  --font-display: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Type scale — major-third-ish, capped for dense fund-data UIs */
  --t-2xs: 11px;  /* table micro-labels, tags */
  --t-xs:  12px;  /* small / overline */
  --t-sm:  13px;  /* table cells, captions */
  --t-base:14px;  /* body default in dense UI */
  --t-md:  15px;  /* comfortable body */
  --t-lg:  17px;  /* lead paragraph */
  --t-xl:  20px;  /* h4 */
  --t-2xl: 24px;  /* h3 */
  --t-3xl: 32px;  /* h2 */
  --t-4xl: 44px;  /* h1 */
  --t-5xl: 64px;  /* hero */
  --t-6xl: 88px;  /* hero, display */

  /* Line-heights */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  /* Tracking — tight at the top of the scale, loose at the bottom */
  --tr-tight:  -0.02em;
  --tr-snug:   -0.01em;
  --tr-normal: 0;
  --tr-wide:   0.02em;
  --tr-eyebrow:0.08em;   /* uppercase eyebrows / status pills */

  /* =====================================================================
     SPACING — 4px grid
     ===================================================================== */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;
  --s-11: 96px;
  --s-12: 128px;

  /* =====================================================================
     RADII
     Conservative — fund managers don't trust pillows.
     ===================================================================== */
  --r-0: 0;
  --r-1: 2px;     /* tags, table cells */
  --r-2: 4px;     /* inputs, small buttons */
  --r-3: 6px;     /* buttons, menu items */
  --r-4: 8px;     /* cards */
  --r-5: 12px;    /* large cards / panels */
  --r-pill: 999px;

  /* =====================================================================
     SHADOWS — nearly nonexistent. Hairlines do most of the work.
     ===================================================================== */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(11, 12, 16, 0.04), 0 0 0 1px var(--line);
  --shadow-2: 0 1px 2px rgba(11, 12, 16, 0.06), 0 0 0 1px var(--line);
  --shadow-3: 0 8px 24px -8px rgba(11, 12, 16, 0.18), 0 0 0 1px var(--line-strong);
  --shadow-pop: 0 16px 48px -12px rgba(11, 12, 16, 0.28), 0 0 0 1px var(--line-strong);

  /* =====================================================================
     MOTION
     Short, mostly opacity / Y. No bounce. No spring.
     ===================================================================== */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 80ms;   /* hover */
  --dur-2: 140ms;  /* state */
  --dur-3: 220ms;  /* layout */
  --dur-4: 360ms;  /* page */

  /* =====================================================================
     CONTAINERS
     ===================================================================== */
  --container-narrow: 720px;
  --container-text:   880px;
  --container:        1200px;
  --container-wide:   1360px;
}
}