/* 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) */
  /* Neutral black palette — true-black base with stepped greys so cards,
     inputs and menus separate clearly without any blue cast. */
  --color-bg:            #050505;   /* page background */
  --color-bg-deep:       #000000;   /* deepest layer (behind blobs) */
  --color-surface:       #121212;   /* default surface */
  --color-surface-2:     #1A1A1A;   /* slightly elevated surface */
  --color-surface-3:     #242424;   /* inputs / wells */
  --color-border:        rgba(255, 255, 255, 0.12);
  --color-border-strong: rgba(255, 255, 255, 0.22);

  /* Color — text */
  --color-text:          #FFFFFF;
  --color-text-strong:   #FFFFFF;
  --color-text-muted:    #D4D4D8;
  --color-text-faint:    #A1A1AA;
  --color-text-inverse:  #050505;

  /* Color — brand & status (the brief's palette) */
  --color-primary:       #6366F1;   /* indigo-500 */
  --color-primary-hover: #A5B4FC;   /* indigo-300 — lighter, reads on black */
  --color-primary-text:  #A5B4FC;   /* brand colour when used as TEXT / icon on the dark surface */
  --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:       #34D399;
  --color-success-soft:  rgba(52, 211, 153, 0.18);
  --color-warn:          #FBBF24;
  --color-warn-soft:     rgba(251, 191, 36, 0.18);
  --color-danger:        #F87171;
  --color-danger-soft:   rgba(248, 113, 113, 0.18);
  --color-focus:         #A5B4FC;

  /* 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(22, 22, 22, 0.72);
  --glass-bg-strong:     rgba(14, 14, 14, 0.86);
  --glass-bg-soft:       rgba(22, 22, 22, 0.48);
  --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.13);
  --glass-border-strong: rgba(255, 255, 255, 0.24);

  /* Shadows (deep + soft premium depth) */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.62);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.72);
  --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;

  /* Cursor spotlight (decorative glow that trails the native cursor) */
  --cursor-spotlight-color: rgba(165, 180, 252, 0.22);
}

/* ─── 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-text:  #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);

  /* Cursor spotlight — a touch stronger on light backgrounds so it reads */
  --cursor-spotlight-color: rgba(99, 102, 241, 0.30);
}