/* ==========================================================================
   FinTech Express — Design tokens
   Palette: deep emerald + lime accent on a light, green-tinted neutral base.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --brand-950: #04211a;
  --brand-900: #063527;
  --brand-800: #045138;
  --brand-700: #04724d;
  --brand-600: #068a5c;
  --brand-500: #0ba360;
  --brand-400: #2fc47f;
  --brand-300: #6fdca6;
  --brand-200: #a9edcb;
  --brand-100: #d5f7e5;
  --brand-50:  #eefcf5;

  --accent-600: #7fa515;
  --accent-500: #a6d321;
  --accent-400: #c6f24e;
  --accent-300: #d9f884;
  --accent-200: #eafbc4;
  --accent-100: #f3fde2;

  --primary: var(--brand-500);
  --primary-hover: #098b52;
  --primary-active: #077444;
  --primary-soft: var(--brand-100);
  --accent: var(--accent-400);

  /* --- Neutrals --------------------------------------------------------- */
  --ink: #08251c;
  --ink-2: #2f4841;
  --muted: #6b837c;
  --muted-2: #93a8a1;

  --bg: #f5faf7;
  --bg-alt: #edf6f1;
  --surface: #ffffff;
  --surface-2: #f8fbf9;
  --surface-inverse: var(--brand-950);

  --border: #dee9e4;
  --border-strong: #c6d8d0;
  --border-inverse: rgba(255, 255, 255, 0.14);

  /* --- Status ----------------------------------------------------------- */
  --success: #0ba360;
  --success-bg: #e7f9f0;
  --warning: #b7791f;
  --warning-bg: #fdf5e3;
  --danger: #c53030;
  --danger-bg: #fdeaea;
  --info: #1e6fa8;
  --info-bg: #e8f3fb;

  /* --- Typography ------------------------------------------------------- */
  --font-display: "Sora", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-xs: 0.75rem;    /* 12 */
  --fs-sm: 0.8125rem;  /* 13 */
  --fs-base: 0.9375rem;/* 15 */
  --fs-md: 1rem;       /* 16 */
  --fs-lg: 1.125rem;   /* 18 */
  --fs-xl: 1.375rem;   /* 22 */
  --fs-2xl: 1.75rem;   /* 28 */
  --fs-3xl: 2.25rem;   /* 36 */
  --fs-4xl: 3rem;      /* 48 */
  --fs-5xl: 3.75rem;   /* 60 */

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-normal: 1.6;

  --tracking-tight: -0.03em;
  --tracking-wide: 0.08em;

  /* --- Space ------------------------------------------------------------ */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  --section-y: clamp(3.5rem, 7vw, 6.5rem);
  --container: 1200px;
  --container-narrow: 820px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* --- Radii ------------------------------------------------------------ */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* --- Elevation -------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(8, 37, 28, 0.05);
  --shadow-sm: 0 2px 8px rgba(8, 37, 28, 0.06);
  --shadow-md: 0 8px 24px rgba(8, 37, 28, 0.08);
  --shadow-lg: 0 20px 48px rgba(8, 37, 28, 0.12);
  --shadow-primary: 0 10px 28px rgba(11, 163, 96, 0.28);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 140ms;
  --t-base: 220ms;
  --t-slow: 420ms;

  --header-h: 72px;
  --topbar-h: 38px;
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
  }
}