/* ==========================================================================
   HAQI FINANCE - DESIGN SYSTEM & THEME TOKENS
   Encanto Botanical Casa Aesthetic (Light & Dark Nocturnal Jungle)
   ========================================================================== */

:root {
  /* Botanical Palette */
  --forest-dark: #143626;
  --forest-primary: #1B4332;
  --botanical-green: #2D6A4F;
  --leaf-green: #40916C;
  --sage-green: #52B788;
  --soft-sage: #74C69D;
  --light-sage: #D8F3DC;

  /* Encanto Warm Accents */
  --terracotta: #E07A5F;
  --terracotta-light: #F8EBE7;
  --muted-gold: #E9C46A;
  --warm-amber: #F4A261;
  --floral-pink: #E84A8A;
  --jacaranda-purple: #7B4FA3;
  --purple-light: #F4EEF9;
  --warm-brown: #582F0E;

  /* Light Theme Canvas (Warm Cream & Ivory) */
  --bg-app: #FBF9F4;
  --bg-surface: #FFFFFF;
  --bg-surface-alt: #F7F3EB;
  --bg-card: #FFFFFF;
  --bg-input: #FDFBF7;
  --border-color: #E8DEC8;
  --border-subtle: #F0E8D8;

  /* Text & Contrast */
  --text-heading: #241D20;
  --text-body: #4E4246;
  --text-muted: #7E7075;
  --text-subtle: #9F9297;
  --text-white: #FFFFFF;

  /* Status Colors */
  --status-success: #2D6A4F;
  --status-warning: #D97706;
  --status-warning-bg: #FEF3C7;
  --status-danger: #D9534F;
  --status-danger-bg: #FEE2E2;

  /* Typography */
  --font-brand: 'Merienda', cursive, serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-numeric: 'Nunito', sans-serif;

  /* Geometry & Elevation */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-full: 9999px;

  --shadow-sm: 0 2px 8px rgba(45, 106, 79, 0.05);
  --shadow-md: 0 6px 20px rgba(45, 106, 79, 0.08);
  --shadow-lg: 0 14px 34px rgba(45, 106, 79, 0.12);
  --shadow-card: 0 4px 16px rgba(36, 29, 32, 0.04);
  --shadow-float: 0 16px 36px rgba(27, 67, 50, 0.22);

  /* Layout Constants */
  --sidebar-width: 260px;
  --header-height: 72px;
  --bottom-nav-height: 68px;
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   DARK THEME: NOCTURNAL BOTANICAL JUNGLE
   ========================================================================== */
[data-theme="dark"],
body.dark-mode {
  --forest-dark: #0D1611;
  --forest-primary: #183325;
  --botanical-green: #255740;
  --leaf-green: #377E59;
  --sage-green: #4EA377;
  --soft-sage: #6EC196;
  --light-sage: #1E382A;

  --terracotta: #EB856B;
  --terracotta-light: #2C1E1B;
  --muted-gold: #F2CF77;
  --warm-amber: #FAAE70;
  --floral-pink: #F0649F;
  --jacaranda-purple: #9569BD;
  --purple-light: #271E30;

  --bg-app: #121A15;
  --bg-surface: #1A251E;
  --bg-surface-alt: #212E26;
  --bg-card: #1D2A22;
  --bg-input: #16201A;
  --border-color: #2D3D32;
  --border-subtle: #25332A;

  --text-heading: #FDFBF7;
  --text-body: #E3DAD8;
  --text-muted: #A89C9E;
  --text-subtle: #827578;
  --text-white: #FFFFFF;

  --status-warning-bg: #332A15;
  --status-danger-bg: #381A1A;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-float: 0 16px 36px rgba(0, 0, 0, 0.7);
}

/* Base resets */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-app);
  color: var(--text-body);
  line-height: 1.55;
  font-size: 14.5px;
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  transition: background-color var(--transition-normal), color var(--transition-normal);
  background-image: 
    radial-gradient(circle at 5% 15%, rgba(45, 106, 79, 0.035) 0%, transparent 40%),
    radial-gradient(circle at 95% 85%, rgba(224, 122, 95, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(233, 196, 106, 0.02) 0%, transparent 60%);
  background-attachment: fixed;
}

/* Headings */
h1, h2, h3, .brand-font {
  font-family: var(--font-brand);
  color: var(--text-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
}

h4, h5, h6 {
  font-family: var(--font-body);
  color: var(--text-heading);
  font-weight: 600;
}

.num-font {
  font-family: var(--font-numeric);
  font-feature-settings: "tnum";
}

/* Botanical Subtle Animations */
@keyframes leafFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(2deg); }
}

@keyframes gentlePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.02); opacity: 0.95; }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.97) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.animate-float {
  animation: leafFloat 4s ease-in-out infinite;
}

.animate-pulse-gentle {
  animation: gentlePulse 3s ease-in-out infinite;
}