/* ═══════════════════════════════════════════════════════════════════════════
   @nobul/ui — canonical brand + design tokens (v2026.7.0)

   Seeded from "Dialect A" (expenses/public/css/tokens.css + the recruitment
   style.css token block + the shared brand-tokens.css neutrals) so expenses
   and recruitment would see ZERO visual change if they adopted this file.

   Per-app identity (--brand-nav / --brand-accent / --brand-accent-strong) is
   intentionally NOT set here — each app layers its own overrides/<app>.css
   after this file.

   ── RESOLVED (2026-07-03) — page background is grey #f0f1f3 ──────────────
   Product decision: the canonical page background is cool grey #f0f1f3
   (what expenses/recruitment/safety already ship). --brand-bg and --bg both
   carry it. The legacy cream #F4F2EC is retired: hub renders cream today and
   WILL visibly change when it adopts this file; people's #f8fafc likewise.

   ── OPEN QUESTION 2 — neutral ramp ────────────────────────────────────────
   expenses/recruitment/safety use Tailwind-GRAY neutrals (#f9fafb…#111827,
   below); finance/people use Tailwind-SLATE (#f8fafc…#0f172a) plus a --ring
   token. This file ships the Dialect-A gray ramp; finance/people adoption
   requires deciding slate-vs-gray (or shipping both ramps). Unresolved.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Fonts — self-hosted InterVariable (vendored in ./fonts/) ───────────── */
@font-face {
  font-family: "Inter";
  src: url("./fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("./fonts/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ── Brand neutrals — identical across every app's brand-tokens.css ───── */
  --brand-bg: #f0f1f3;            /* canonical page bg (decision 2026-07-03); legacy cream #F4F2EC retired */
  --brand-surface: #ffffff;
  --brand-surface-soft: #fbfaf6;
  --brand-ink: #0F172A;
  --brand-muted: #5B5F66;
  --brand-border: #EFE9DD;
  --brand-ochre: #B66B2D;
  --brand-blue: #2F68D9;
  --brand-green: #0F7A67;
  --brand-red: #C9473D;
  --brand-radius: 8px;
  --brand-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Accent fills and their small-text foregrounds are set per app in
     overrides/<app>.css. These defaults cover a consumer without an override. */
  --brand-accent-foreground: #ffffff;
  --brand-accent-strong-foreground: #ffffff;

  /* ── Semantic colours — Dialect A values ──────────────────────────────── */
  --success:     #059669;
  --success-foreground: #0F172A;
  --success-strong: #047857;
  --success-strong-foreground: #ffffff;
  --success-bg:  #ecfdf5;
  --warn:        #d97706;
  --warn-foreground: #0F172A;
  --warn-strong: #b45309;
  --warn-strong-foreground: #ffffff;
  --warn-bg:     #fffbeb;
  --warn-text:   #92400e;
  --warn-bg-alt: #fef9c3;
  --danger:      #dc2626;
  --danger-foreground: #ffffff;
  --danger-dk:   #b91c1c;
  --danger-dk-foreground: #ffffff;
  --danger-bg:   #fef2f2;
  --info:        #3b82f6;
  --info-bg:     #dbeafe;

  /* Badge text tones — light values EQUAL the historical badge literals so
     light mode is pixel-identical; the dark block redefines them (same proven
     pattern as --warn-text). */
  --badge-success-text: #065f46;
  /* Safety verdict pills — deliberately saturated and theme-independent */
  --verdict-pass-bg: #6ee7b7; --verdict-pass-text: #064e3b;
  --verdict-warn-bg: #fcd34d; --verdict-warn-text: #78350f;
  --verdict-fail-bg: #fca5a5; --verdict-fail-text: #7f1d1d;
  --badge-danger-text:  #991b1b;
  --badge-info-text:    #1e40af;

  /* ── Neutrals (Tailwind gray — OPEN QUESTION 2 re slate apps) ─────────── */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --border:   #e5e7eb;
  --text-label: #4b5563;

  /* ── Surfaces ─────────────────────────────────────────────────────────── */
  --bg:            #f0f1f3;       /* = --brand-bg (canonical page bg) */
  --surface:       #ffffff;
  --surface-alt:   #f9fafb;
  --surface-hover: #e8ecf1;
  --overlay-bg:    rgba(17,24,39,.35);
  --text:          #111827;
  --text-muted:    #6b7280;

  /* ── Radii ────────────────────────────────────────────────────────────── */
  --radius:    var(--brand-radius, 8px);
  --radius-sm: 5px;
  --radius-lg: 10px;

  /* ── Shadows ──────────────────────────────────────────────────────────── */
  --shadow:    0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.04);
  --shadow-lg: 0 4px 16px rgba(0,0,0,.10), 0 12px 40px rgba(0,0,0,.06);

  /* ── Typography — 13px-anchored scale (Dialect A) ─────────────────────── */
  --font:      var(--brand-font, "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --font-mono: var(--font);
  --fs-xs:  10px;
  --fs-sm:  11px;
  --fs-md:  12px;
  --fs-base: 13px;
  --fs-lg:  14px;
  --fs-xl:  15px;
  --fs-2xl: 16px;
  --fs-3xl: 18px;
  --fs-4xl: 20px;
  --fs-5xl: 24px;
  --fs-6xl: 26px;

  /* ── Spacing scale ────────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease:        cubic-bezier(.4, 0, .2, 1);
  --motion-fast: .1s;
  --motion-med:  .15s;
  --motion-slow: .25s;

  /* ── Focus ring ───────────────────────────────────────────────────────── */
  --focus-color:      var(--primary, var(--brand-accent, var(--brand-ink)));
  --focus-ring-rgba:  color-mix(in srgb, var(--focus-color) 20%, transparent);
  --danger-ring-rgba: rgba(220,38,38,.15);

  /* ── Z-index layers — per .docs/nobul-select-standards.md ─────────────── */
  /* Standard ordering: modal panel < select/dropdown menu < blocking confirm
     dialog < toast. --z-dropdown:1800 matches recruitment's shipped portal
     value; the others slot around it per the contract. */
  --z-modal:    600;
  --z-dropdown: 1800;
  --z-confirm:  1900;
  --z-toast:    2000;
  --z-splash:   3000;   /* boot splash (splash.css) sits above toasts and confirms */
}

/* ── Dark theme (activated by NobulUI.initTheme / toggleTheme, which set
     data-theme="dark" on <html> and persist to localStorage). Overrides the
     FULL neutral/surface/semantic set the components consume, plus an inverted
     gray ramp, so dark mode works throughout. Per-app nav/accent darks live in
     overrides/<app>.css. Brand accents stay as the app sets them. ── */
:root[data-theme="dark"] {
  color-scheme: dark;

  --brand-bg: #101318;
  --brand-surface: #171B22;
  --brand-surface-soft: #1E242D;
  --brand-ink: #F0F3F7;
  --brand-muted: #AAB3C1;
  --brand-border: #2B3441;
  --brand-accent-foreground: #0F172A;
  --brand-accent-strong-foreground: #0F172A;

  /* Surfaces + text */
  --bg:            #101318;
  --surface:       #171B22;
  --surface-alt:   #1E242D;
  --surface-hover: #232A34;
  --overlay-bg:    rgba(0,0,0,.55);
  --text:          #F0F3F7;
  --text-muted:    #AAB3C1;
  --text-label:    #AAB3C1;
  --border:        #2B3441;

  /* Inverted gray ramp — 50 = darkest surface, 900 = lightest text, so
     existing `color:var(--gray-700)`/`background:var(--gray-100)` usages read
     correctly on dark without touching component code. */
  --gray-50:  #171B22;
  --gray-100: #1E242D;
  --gray-200: #2B3441;
  --gray-300: #3A4552;
  --gray-400: #55606E;
  --gray-500: #8B95A3;
  --gray-600: #AAB3C1;
  --gray-700: #C7CED8;
  --gray-800: #DDE3EB;
  --gray-900: #F0F3F7;

  /* Semantic tint backgrounds — darkened so text stays legible; the strong
     hues (--success/--danger/--warn/--info) are kept for icons/borders. */
  --success-bg:  #0c2a22;
  --warn-bg:     #2a2210;
  --warn-bg-alt: #33280f;
  --warn-text:   #f6c667;
  --danger-bg:   #2a1416;
  --info-bg:     #14223b;

  /* Badge text tones — light-on-tone so they stay legible on the inverted
     dark tint fills above (WCAG-legible: #6ee7b7 on #0c2a22, #fca5a5 on
     #2a1416, #93c5fd on #14223b). */
  --badge-success-text: #6ee7b7;
  --badge-danger-text:  #fca5a5;
  --badge-info-text:    #93c5fd;

  /* Shadows deepen on dark */
  --shadow:    0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 1px 3px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.4);
  --shadow-lg: 0 4px 16px rgba(0,0,0,.55), 0 12px 40px rgba(0,0,0,.45);
}