/**
 * public/design-tokens.css
 * Phase 5C-1B — the canonical design-token layer, recovered from
 * Founder-Os/src/24_DashboardUI.html's Tailwind theme (Material-3-style
 * role names: surface/on-surface/primary/tertiary/error etc.) and ported to
 * plain CSS custom properties, since this app's CSP (style-src 'self')
 * cannot load the legacy Tailwind CDN.
 *
 * Fixes a real bug found during the 5C-1A audit: the previous token layer
 * used one generic --accent for two visually and semantically distinct
 * legacy colors — `primary` (#181f21, near-black, used for content-area
 * buttons/active-treatments) and `tertiary` (#111f2f, navy, used
 * specifically for the sidebar). They are separate tokens here.
 *
 * Fonts and the Material Symbols icon glyph font are self-hosted from
 * /fonts/ (see the @font-face block below) — no Google Fonts or Material
 * Symbols runtime request, no CSP change required (this app's CSP has no
 * explicit font-src, so it already falls back to default-src 'self', which
 * permits same-origin font files with zero policy change).
 */

/* ==========================================================================
   FONTS — self-hosted, latin-subset (this product ships English-only UI
   text; a full Unicode-range set would multiply asset size for no benefit
   here). Manrope and Inter are shipped as single variable-font files
   covering their full imported weight range (400-800); JetBrains Mono ships
   only the one weight (500) the legacy design actually used.
   ========================================================================== */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/manrope-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/inter-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-500.woff2') format('woff2');
}

/* Material Symbols Outlined — subset to exactly the icon glyphs the
   application shell + recovered Commitments/Investor CRM/Cap Table modules
   use today (sidebar nav, header chrome, and each module's metric/signal/
   table/modal icons — Phases 5C-R/5C-3). Additional glyphs get added to
   this subset as each future module's own fidelity phase actually wires
   them up — not pre-loaded speculatively. Phase 5C-3 also fixed a
   pre-existing bug: commitments.js's WATCH-tier signal icon (`visibility`)
   was referenced in shipped code but had never actually been added to the
   subset (no WATCH-tier signal had appeared in any visual-QA fixture, so it
   was never caught) — added here alongside the new modules' icons.
   Base cmap now also includes digits 0-9 (needed for icon names containing
   a digit, e.g. `diversity_3` — the previous phase's subset omitted these
   since no icon name up to that point needed one).
   Regenerated via fontTools.subset from the real Google Fonts "Material
   Symbols Outlined" source using --glyphs-file (exact resolved ligature
   output glyphs, via uharfbuzz shaping) + --no-layout-closure, so only the
   GSUB rules for these specific icon names survive — an icon name outside
   this list renders as literal fallback letters, not a glyph, exactly like
   before this phase's expansion. This subset is a static (non-variable)
   instance, unlike the original — FILL/GRAD/opsz variation-settings below
   are harmless no-ops on it, so `data-weight="fill"` no longer visually
   fills an icon (accepted, documented cosmetic difference). */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('/fonts/material-symbols-outlined-shell.woff2') format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined[data-weight="fill"] {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

:root {
  color-scheme: light dark;

  /* ---- typography tokens ------------------------------------------------
     PROVEN: Manrope/Inter/JetBrains Mono are the three fonts the legacy
     product imports. LIKELY (not provable from source — the legacy Tailwind
     config never actually wired its type-scale classes, such as
     font-display-lg, font-body-lg, and font-mono, to these imports, see the
     5C-0/5C-1A audits): Manrope for display/heading treatments, Inter for
     body/interface text, JetBrains Mono for numeric/ID/monospace
     treatments. This is the founder's locked, explicit recovered-design
     decision (Phase 5C-1B), not a claim that the legacy config proved this
     mapping — it did not. */
  --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- surface / foreground hierarchy (legacy light theme) -------------- */
  --bg: #fcf9f8;                    /* surface / background */
  --surface: #ffffff;               /* surface-container-lowest */
  --surface-container-low: #f6f3f2;
  --surface-container: #f0eded;
  --surface-container-high: #eae7e7;
  --surface-container-highest: #e5e2e1;
  --surface-variant: #e5e2e1;
  --fg: #1b1b1c;                    /* on-surface */
  --fg-muted: #434749;              /* on-surface-variant */
  --fg-faint: #747879;              /* outline */
  --border: #c3c7c8;                /* outline-variant */

  /* ---- primary (content-area accent) — distinct from the sidebar's navy */
  --primary: #181f21;
  --on-primary: #ffffff;
  --primary-container: #2d3436;
  --on-primary-container: #959c9f;

  /* ---- secondary (recovered token, not yet consumed by any component;
     kept available so future component work has the real value rather than
     inventing one later) ---------------------------------------------- */
  --secondary: #595f65;
  --on-secondary: #ffffff;
  --secondary-container: #dee3ea;
  --on-secondary-container: #5f656b;

  /* ---- shell material (Phase: Material System) — the dark soft-neumorphic
     application shell (sidebar + top header + their controls), a fixed
     brand surface that never flips with color scheme (see the dark-mode
     block below, which deliberately does not touch these). `--sidebar-*`
     names are kept as aliases below so nothing that already reads them
     breaks; `.app-sidebar`/`.app-header` themselves now read `--shell-*`
     directly, since the header joined the sidebar as one dark material
     (previously it sat on the light canvas — the Founder's approved
     direction now unifies both as a single dark shell wrapping the warm
     command canvas, matching the recovered Antigravity reference). -------- */
  --shell-bg: #111f2f;                              /* tertiary — base shell tone */
  --shell-bg-raised: #16283c;                       /* lighter navy tint — raised chips/CTAs sit on this conceptually */
  --shell-bg-inset: #0c1622;                        /* darker navy tint — recessed/active-pressed states */
  --shell-hover-bg: rgba(38, 52, 69, 0.5);
  --shell-border: #263445;                          /* tertiary-container */
  --shell-fg: #ffffff;                              /* on-tertiary */
  --shell-fg-muted: #8e9cb1;                        /* on-tertiary-container */
  --shell-edge-highlight: rgba(255, 255, 255, 0.06); /* faint top-edge light line for a machined, not flat, feel */
  /* legacy aliases — kept so any not-yet-migrated consumer still resolves */
  --sidebar-bg: var(--shell-bg);
  --sidebar-hover-bg: var(--shell-hover-bg);
  --sidebar-border: var(--shell-border);
  --sidebar-fg: var(--shell-fg);
  --sidebar-fg-muted: var(--shell-fg-muted);

  /* ---- status colors ------------------------------------------------- */
  --danger: #ba1a1a;                 /* error */
  --danger-bg: #ffdad6;              /* error-container */
  --success: #15803d;
  /* Not a first-class token in the legacy source (it used ad hoc amber
     Tailwind literals — bg-amber-500/10 etc. — in Commitments/Investor
     badges) — formalized here as one canonical token rather than continuing
     the ad hoc pattern, per the 5C-1A recommendation. */
  --warning: #b45309;
  --warning-bg: rgba(180, 130, 20, 0.14);

  /* ---- radius scale (legacy: DEFAULT .25rem, lg .5rem, xl .75rem,
     2xl 1rem, 3xl 1.25rem, full 9999px) --------------------------------- */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-full: 9999px;
  --radius: 10px; /* legacy alias kept for existing consumers pending a broader component pass */

  /* ---- shadows --------------------------------------------------------- */
  --shadow-extruded: -4px -4px 8px #ffffff, 4px 4px 8px rgba(116, 120, 121, 0.18);
  --shadow-extruded-hover: -6px -6px 12px #ffffff, 6px 6px 12px rgba(116, 120, 121, 0.22);
  --shadow-inset: inset -4px -4px 8px #ffffff, inset 4px 4px 8px rgba(116, 120, 121, 0.18);
  --sidebar-shadow: 5px 5px 15px #0e1c2c, -5px -5px 15px #1a2a3e;
  --sidebar-shadow-active: inset 3px 3px 6px #0a141e, inset -3px -3px 6px #182a40;

  /* ---- shell soft-neumorphic shadows (Phase: Material System) — dark-tone
     calibrated (highlight = a lighter navy tint, shade = a darker navy
     tint, never pure black/white) so raised shell chrome — nav active
     state, CTA, chips — reads as machined from the shell's own material
     rather than a generic drop-shadow pasted on top. --shell-shadow-soft is
     the ambient panel-level shadow the whole sidebar/header casts against
     the page; -raised/-inset are for individual controls within the shell. */
  --shell-shadow-soft: 0 8px 28px rgba(5, 10, 18, 0.35);
  --shell-shadow-raised: -3px -3px 7px rgba(45, 66, 94, 0.35), 3px 3px 10px rgba(3, 7, 13, 0.55);
  --shell-shadow-inset: inset 2px 2px 5px rgba(3, 7, 13, 0.6), inset -2px -2px 5px rgba(45, 66, 94, 0.25);

  /* ---- warm command canvas (Phase: Material System) — the module content
     environment's own soft-neumorphic material, deliberately warm (paired
     with the dark shell above, matching the public site's warm character)
     rather than the cool near-white --surface tokens used elsewhere in this
     app today. Scoped to opt-in consumers only (Commitments this phase, via
     the `.ce-*` primitives) — --bg/--surface themselves are untouched, so
     Dashboard/Investor CRM keep their current appearance until their own
     fidelity phase. Elevation is a hierarchy, not decoration:
       Level 1 (--command-surface-1, --command-shadow-strong): primary command
         sections — Commitments header/table container.
       Level 2 (--command-surface-2, --command-shadow-soft): intelligence/
         metric surfaces — the 8 metric cards, signal/trend panels.
       Level 3 (--command-surface-3): nested rows/sub-cards — table rows,
         modal cells; shadow-free or a hairline border, not a competing shadow.
       Inset (--command-surface-inset, --command-shadow-inset): controls —
         filter pills, search, inputs. */
  --command-canvas-bg: #efe8dc;
  --command-surface-1: #faf6ee;
  --command-surface-2: rgba(250, 246, 238, 0.7);
  --command-surface-3: #f4efe4;
  --command-surface-inset: #e8e0d0;
  --command-fg: #262019;
  --command-fg-muted: #6b6255;
  --command-border: rgba(120, 105, 80, 0.18);
  --command-edge-highlight: rgba(255, 255, 255, 0.65);
  --command-shadow-strong: -6px -6px 14px rgba(255, 255, 255, 0.75), 6px 6px 18px rgba(120, 105, 80, 0.22);
  --command-shadow-soft: -4px -4px 9px rgba(255, 255, 255, 0.7), 4px 4px 12px rgba(120, 105, 80, 0.16);
  --command-shadow-inset: inset -3px -3px 6px rgba(255, 255, 255, 0.6), inset 3px 3px 8px rgba(120, 105, 80, 0.2);

  /* ---- focus ring (legacy form-input focus treatment — a real, defined
     accessible focus state, not currently reproduced at all pre-5C-1B) --- */
  --focus-ring: 0 0 0 2px rgba(24, 31, 33, 0.2);

  /* ---- spacing scale (legacy uses Tailwind's untouched 0.25rem-step
     defaults; not itself tokenized in the legacy source, formalized here
     for the new shared component layer per the 5C-1A recommendation) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1120;
    --surface: #111827;
    --surface-container-low: #0f172a;
    --surface-container: #131f35;
    --surface-container-high: #16243d;
    --surface-container-highest: #1a2942;
    --surface-variant: #1f2937;
    --fg: #f1f5f9;
    --fg-muted: #94a3b8;
    --fg-faint: #64748b;
    --border: #1f2937;
    --primary: #c1c8ca;
    --on-primary: #0b1120;
    --primary-container: #2d3436;
    --on-primary-container: #c1c8ca;
    --secondary: #c2c7ce;
    --on-secondary: #0b1120;
    --secondary-container: #2a323c;
    --on-secondary-container: #c2c7ce;
    --danger: #f87171;
    --danger-bg: #2a1414;
    --success: #4ade80;
    --warning: #fbbf24;
    --warning-bg: rgba(180, 130, 20, 0.22);
    /* --sidebar-* intentionally NOT redefined here — the sidebar is a fixed
       brand surface in the legacy design, not a light/dark variant. */
  }
}