/* ═══════════════════════════════════════════════════════════════════════
   Ported from the FinVentures Design System (claude.ai/design), tokens/*.css,
   verbatim except: the --font-display / Playfair Display webfont import is
   dropped — this is an internal admin tool, not marketing, and Helvetica
   (--font-primary) covers every UI need here without an external font fetch.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ---- Fonts (tokens/fonts.css, minus the Playfair Display import) ---- */
  --font-primary: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Colors (tokens/colors.css) — Brand Guidelines v1.1 §3 ---- */
  --fv-yellow: #FFFF21;
  --fv-navy: #0F172A;
  --fv-white: #FFFFFF;
  --fv-black: #000000;

  --fv-gray: #F8F9FA;
  --fv-gold: #FEC601;
  --fv-success: #198754;
  --fv-danger: #DC3545;

  --fv-navy-800: #1E293B;
  --fv-slate-600: #475569;
  --fv-slate-500: #64748B;
  --fv-slate-400: #94A3B8;
  --fv-slate-300: #CBD5E1;
  --fv-slate-200: #E2E8F0;
  --fv-slate-100: #F1F5F9;

  --fv-yellow-press: #E6E61E;
  --fv-yellow-tint: #FFFFC7;
  --fv-gold-deep: #C4A800;

  --text-primary: var(--fv-black);
  --text-heading: var(--fv-navy);
  --text-body: var(--fv-navy-800);
  --text-muted: var(--fv-slate-500);
  --text-inverse: var(--fv-white);
  --text-on-yellow: var(--fv-black);
  --text-link: var(--fv-navy);
  --text-link-hover: var(--fv-black);

  --surface-page: var(--fv-white);
  --surface-subtle: var(--fv-gray);
  --surface-card: var(--fv-white);
  --surface-inverse: var(--fv-navy);
  --surface-accent: var(--fv-yellow);

  --border-subtle: var(--fv-slate-200);
  --border-default: var(--fv-slate-300);
  --border-strong: var(--fv-navy);

  --action-primary-bg: var(--fv-yellow);
  --action-primary-fg: var(--fv-black);
  --action-primary-hover: var(--fv-gold);
  --action-primary-press: var(--fv-yellow-press);
  --action-alt-bg: var(--fv-navy);
  --action-alt-fg: var(--fv-yellow);
  --action-alt-hover: var(--fv-navy-800);

  --state-success: var(--fv-success);
  --state-success-bg: #E8F3EC;
  --state-danger: var(--fv-danger);
  --state-danger-bg: #FBEAEC;
  --state-warning: var(--fv-gold);
  --state-warning-bg: #FFF6DA;

  --focus-ring: 0 0 0 3px rgba(15, 23, 42, .35);

  /* ---- Typography (tokens/typography.css) — H1 32–40, H2 24–28, body 16–18 ---- */
  --text-display: 56px;
  --text-h1: 40px;
  --text-h1-min: 32px;
  --text-h2: 28px;
  --text-h2-min: 24px;
  --text-h3: 20px;
  --text-body-lg: 18px;
  --text-body-md: 16px;
  --text-label: 14px;
  --text-caption: 12px;

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.2;
  --leading-heading: 1.3;
  --leading-body: 1.5;
  --leading-loose: 1.6;

  --tracking-tight: 0px;
  --tracking-normal: 0.25px;
  --tracking-wide: 0.5px;
  --tracking-caps: 1.2px;

  /* ---- Spacing (tokens/spacing.css) — 4px base grid ---- */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --layout-gutter: 24px;
  --layout-max-width: 1200px;
  --layout-section-y: 80px;

  /* ---- Radius (tokens/radius.css) ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --radius-button: 10px;
  --radius-input: 8px;
  --radius-card: 12px;

  /* ---- Elevation (tokens/elevation.css) — navy-tinted, low contrast ---- */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .12);
  --shadow-inset: inset 0 1px 2px rgba(15, 23, 42, .06);

  /* ---- Motion (tokens/motion.css) — short, functional, no bounce ---- */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;
  --ease-standard: cubic-bezier(.2, 0, .2, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --transition-control: background-color var(--duration-fast) var(--ease-standard),
                        color var(--duration-fast) var(--ease-standard),
                        border-color var(--duration-fast) var(--ease-standard),
                        box-shadow var(--duration-fast) var(--ease-standard);
}