/* CSS Variables and Design Tokens - AuraFinance */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Font Families */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;

  /* Animation Timings */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* Border Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.2);
  --shadow-glow-primary: 0 0 20px rgba(139, 92, 246, 0.3);
  --shadow-glow-success: 0 0 20px rgba(16, 185, 129, 0.3);
  
  /* Defaults to Dark Theme for premium look */
  --bg-app: #080b11;
  --bg-sidebar: #0f1422;
  --bg-glass: rgba(18, 24, 41, 0.7);
  --border-glass: rgba(255, 255, 255, 0.06);
  --border-subtle: rgba(255, 255, 255, 0.04);
  
  /* HSL Palette */
  --primary-hsl: 258, 90%, 66%;     /* Radiant Amethyst */
  --primary: hsl(var(--primary-hsl));
  --primary-dark: hsl(258, 90%, 55%);
  --primary-light: hsl(258, 90%, 75%);
  --primary-glow: rgba(139, 92, 246, 0.15);
  
  --success-hsl: 156, 72%, 45%;     /* Neon Emerald */
  --success: hsl(var(--success-hsl));
  --success-glow: rgba(16, 185, 129, 0.15);
  
  --danger-hsl: 343, 90%, 60%;      /* Soft Rose Red */
  --danger: hsl(var(--danger-hsl));
  --danger-glow: rgba(244, 63, 94, 0.15);
  
  --warning-hsl: 36, 100%, 55%;     /* Bright Amber */
  --warning: hsl(var(--warning-hsl));
  --warning-glow: rgba(245, 158, 11, 0.15);
  
  --info-hsl: 195, 100%, 50%;       /* Cyan / Blue */
  --info: hsl(var(--info-hsl));

  /* Text Colors */
  --text-primary: #f3f4f6;
  --text-secondary: #9ca3af;
  --text-tertiary: #6b7280;
  --text-muted: #4b5563;
  --text-on-primary: #ffffff;
}

/* Light Theme Variables - Premium Powdered Pastels Palette */
body.light-theme {
  /* Core Brand Colors matching Pantone Orchid Tint, Almost Aqua, Roses, Peach & Ice Melt */
  --primary: #8e75ac;           /* Orchid Tint Lavender */
  --primary-dark: #7a6198;
  --primary-light: #a28cbd;
  --primary-glow: rgba(142, 117, 172, 0.08);

  --success: #6e8d72;           /* Almost Aqua Sage */
  --success-glow: rgba(110, 141, 114, 0.08);

  --danger: #be727f;            /* Raindrops on Roses Crimson/Pink */
  --danger-glow: rgba(190, 114, 127, 0.08);

  --warning: #cc8966;           /* Peach Dust Orange/Caramel */
  --warning-glow: rgba(204, 137, 102, 0.08);

  --info: #6189aa;              /* Ice Melt Powder Blue */

  /* App Backgrounds matching Pantone 11-4201 Cloud Dancer & 13-4108 Nimbus Cloud */
  --bg-app: #f5f4f0;            /* Cloud Dancer (warm cream/off-white) */
  --bg-sidebar: #fbfaf7;        /* Clean soft warm sidebar */
  --bg-glass: rgba(251, 250, 247, 0.75);
  
  --border-glass: rgba(210, 210, 212, 0.45); /* Nimbus Cloud soft borders */
  --border-subtle: rgba(210, 210, 212, 0.2);

  /* Soft warm grey shadow metrics for premium glass look */
  --shadow-sm: 0 2px 8px rgba(61, 64, 72, 0.03);
  --shadow-md: 0 8px 24px rgba(61, 64, 72, 0.06);
  --shadow-lg: 0 16px 36px rgba(61, 64, 72, 0.08);
  --shadow-glow-primary: 0 0 15px rgba(142, 117, 172, 0.15);
  --shadow-glow-success: 0 0 15px rgba(110, 141, 114, 0.15);

  /* Deep warm slate charcoal typography for gorgeous contrast */
  --text-primary: #3d4048;      /* Dark warm grey */
  --text-secondary: #5c606a;
  --text-tertiary: #7f838e;
  --text-muted: #a2a5ad;
}