/* Design tokens — single source of truth for colors, spacing, radii, type.
   ──────────────────────────────────────────────────────────────────────────
   Xpensic · Premium fintech palette
   Inspired by CRED, Revolut, Monarch Money, Mint and Linear.
   The app defaults to a dark glassmorphic theme; light theme is also
   supported via [data-theme="light"].
   ────────────────────────────────────────────────────────────────────────── */

/* ─── Default (dark) theme ────────────────────────────────────────────── */
:root {
  /* Color — surfaces (deep, layered glass-friendly) */
  --color-bg:            #0F172A;   /* page background */
  --color-bg-deep:       #0B1224;   /* deepest layer (behind blobs) */
  --color-surface:       #1E293B;   /* default surface */
  --color-surface-2:     #25324A;   /* slightly elevated surface */
  --color-surface-3:     #2D3A55;   /* inputs / wells */
  --color-border:        rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.16);

  /* Color — text */
  --color-text:          #FFFFFF;
  --color-text-strong:   #FFFFFF;
  --color-text-muted:    #CBD5E1;
  --color-text-faint:    #94A3B8;
  --color-text-inverse:  #0F172A;

  /* Color — brand & status (the brief's palette) */
  --color-primary:       #6366F1;   /* indigo-500 */
  --color-primary-hover: #818CF8;   /* indigo-400 */
  --color-primary-deep:  #4F46E5;   /* indigo-600 */
  --color-primary-soft:  rgba(99, 102, 241, 0.16);
  --color-accent:        #14B8A6;   /* teal-500 */
  --color-accent-soft:   rgba(20, 184, 166, 0.18);
  --color-success:       #22C55E;
  --color-success-soft:  rgba(34, 197, 94, 0.16);
  --color-warn:          #F59E0B;
  --color-warn-soft:     rgba(245, 158, 11, 0.16);
  --color-danger:        #EF4444;
  --color-danger-soft:   rgba(239, 68, 68, 0.16);
  --color-focus:         #818CF8;

  /* Color — gradients used in hero / chart fills / glow blobs */
  --grad-hero:           linear-gradient(135deg, #6366F1 0%, #14B8A6 100%);
  --grad-hero-soft:      linear-gradient(135deg, rgba(99,102,241,0.25), rgba(20,184,166,0.18));
  --grad-primary:        linear-gradient(135deg, #6366F1 0%, #818CF8 100%);
  --grad-accent:         linear-gradient(135deg, #14B8A6 0%, #2DD4BF 100%);
  --grad-warm:           linear-gradient(135deg, #F59E0B 0%, #F472B6 100%);
  --grad-danger:         linear-gradient(135deg, #EF4444 0%, #F97316 100%);
  --grad-success:        linear-gradient(135deg, #22C55E 0%, #14B8A6 100%);
  --grad-progress:       linear-gradient(90deg, #6366F1 0%, #14B8A6 100%);

  /* Glassmorphism primitives */
  --glass-bg:            rgba(30, 41, 59, 0.55);
  --glass-bg-strong:     rgba(30, 41, 59, 0.72);
  --glass-bg-soft:       rgba(30, 41, 59, 0.32);
  --glass-blur:          saturate(180%) blur(20px);
  --glass-blur-strong:   saturate(180%) blur(28px);
  --glass-blur-soft:     saturate(160%) blur(12px);
  --glass-border:        rgba(255, 255, 255, 0.10);
  --glass-border-strong: rgba(255, 255, 255, 0.18);

  /* Shadows (deep + soft premium depth) */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18);
  --shadow-sm: 0 4px 12px rgba(2, 6, 23, 0.32);
  --shadow-md: 0 10px 30px rgba(2, 6, 23, 0.42);
  --shadow-lg: 0 24px 60px rgba(2, 6, 23, 0.50);
  --shadow-glow-primary: 0 12px 36px rgba(99, 102, 241, 0.35);
  --shadow-glow-accent:  0 12px 36px rgba(20, 184, 166, 0.32);

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radii — softer / rounder for fintech feel */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* Type — Inter / Poppins */
  --font-sans: "Inter", "Poppins", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Inter", "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   20px;
  --text-xl:   28px;
  --text-2xl:  34px;
  --text-3xl:  44px;
  --text-display: clamp(34px, 5vw, 56px);

  /* Layout */
  --header-h: 68px;
  --nav-w: 248px;
  --content-max: 1240px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-med:  250ms;
  --dur-slow: 400ms;

  /* Custom cursor */
  --cursor-dot-size: 8px;
  --cursor-ring-size: 36px;
}

/* ─── Light theme (kept for users who prefer it) ───────────────────────── */
:root[data-theme="light"] {
  --color-bg:            #F4F6FB;
  --color-bg-deep:       #E7ECF6;
  --color-surface:       #FFFFFF;
  --color-surface-2:     #F1F4FB;
  --color-surface-3:     #E8EEF9;
  --color-border:        rgba(15, 23, 42, 0.08);
  --color-border-strong: rgba(15, 23, 42, 0.16);

  --color-text:          #0F172A;
  --color-text-strong:   #0F172A;
  --color-text-muted:    #475569;
  --color-text-faint:    #64748B;
  --color-text-inverse:  #FFFFFF;

  --color-primary:       #6366F1;
  --color-primary-hover: #4F46E5;
  --color-primary-deep:  #4338CA;
  --color-primary-soft:  rgba(99, 102, 241, 0.12);
  --color-accent:        #14B8A6;
  --color-accent-soft:   rgba(20, 184, 166, 0.12);
  --color-success:       #16A34A;
  --color-success-soft:  rgba(22, 163, 74, 0.12);
  --color-warn:          #D97706;
  --color-warn-soft:     rgba(217, 119, 6, 0.14);
  --color-danger:        #DC2626;
  --color-danger-soft:   rgba(220, 38, 38, 0.10);
  --color-focus:         #6366F1;

  --grad-hero:           linear-gradient(135deg, #6366F1 0%, #14B8A6 100%);
  --grad-hero-soft:      linear-gradient(135deg, rgba(99,102,241,0.10), rgba(20,184,166,0.08));
  --grad-primary:        linear-gradient(135deg, #6366F1 0%, #818CF8 100%);
  --grad-accent:         linear-gradient(135deg, #14B8A6 0%, #2DD4BF 100%);
  --grad-warm:           linear-gradient(135deg, #F59E0B 0%, #F472B6 100%);
  --grad-danger:         linear-gradient(135deg, #EF4444 0%, #F97316 100%);
  --grad-success:        linear-gradient(135deg, #22C55E 0%, #14B8A6 100%);
  --grad-progress:       linear-gradient(90deg, #6366F1 0%, #14B8A6 100%);

  --glass-bg:            rgba(255, 255, 255, 0.65);
  --glass-bg-strong:     rgba(255, 255, 255, 0.82);
  --glass-bg-soft:       rgba(255, 255, 255, 0.42);
  --glass-blur:          saturate(180%) blur(20px);
  --glass-blur-strong:   saturate(180%) blur(28px);
  --glass-blur-soft:     saturate(160%) blur(12px);
  --glass-border:        rgba(15, 23, 42, 0.08);
  --glass-border-strong: rgba(15, 23, 42, 0.14);

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.14);
  --shadow-glow-primary: 0 12px 36px rgba(99, 102, 241, 0.22);
  --shadow-glow-accent:  0 12px 36px rgba(20, 184, 166, 0.20);
}