/* ==========================================================================
   XPENSIC — Design Tokens
   Mirrors the app's design system exactly (dark glassmorphic fintech theme).
   ========================================================================== */

:root {
  /* ---- Color palette (from the app's design tokens) ---- */
  --bg-page: #0F172A;
  --bg-deep: #0B1224;
  --surface-1: #1E293B;
  --surface-2: #25324A;
  --surface-3: #2D3A55;

  --text-primary: #FFFFFF;
  --text-muted: #CBD5E1;
  --text-faint: #94A3B8;

  --color-primary: #6366F1;
  --color-primary-hover: #818CF8;
  --color-primary-deep: #4F46E5;
  --color-accent: #14B8A6;

  --color-success: #22C55E;
  --color-warn: #F59E0B;
  --color-danger: #EF4444;

  /* ---- Hero gradient ---- */
  --gradient-hero: linear-gradient(135deg, #6366F1 0%, #14B8A6 100%);
  --gradient-hero-soft: linear-gradient(135deg, rgba(99, 102, 241, 0.16) 0%, rgba(20, 184, 166, 0.16) 100%);

  /* ---- Glassmorphism ---- */
  --glass-bg: rgba(30, 41, 59, 0.55);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-strong: rgba(255, 255, 255, 0.18);
  --glass-blur: blur(20px) saturate(180%);

  /* ---- Typography ---- */
  --font-display: "Poppins", "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display: clamp(34px, 5vw, 56px);
  --fs-h2: clamp(26px, 3.6vw, 40px);
  --fs-h3: clamp(18px, 2.2vw, 24px);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.75rem;

  /* ---- Radii ---- */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-med: 300ms;
  --dur-slow: 400ms;

  /* ---- Layout ---- */
  --container: 1160px;
  --nav-height: 4.5rem;
  --section-pad: clamp(4rem, 9vw, 7rem);

  /* ---- Shadows ---- */
  --shadow-sm: 0 4px 16px rgba(2, 6, 23, 0.35);
  --shadow-md: 0 12px 40px rgba(2, 6, 23, 0.45);
  --shadow-glow: 0 0 60px rgba(99, 102, 241, 0.35);
}

/* ---- Light theme (optional, dark is the primary identity) ---- */
[data-theme="light"] {
  --bg-page: #F8FAFC;
  --bg-deep: #EEF2F7;
  --surface-1: #FFFFFF;
  --surface-2: #F1F5F9;
  --surface-3: #E2E8F0;

  --text-primary: #0F172A;
  --text-muted: #334155;
  --text-faint: #64748B;

  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(15, 23, 42, 0.08);
  --glass-border-strong: rgba(15, 23, 42, 0.16);

  --shadow-sm: 0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 12px 40px rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 0 60px rgba(99, 102, 241, 0.2);
}