/* ============================================================
   Valoex — Design Tokens (Material Design 3)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ── Brand Colors ── */
  --brand-primary:       #6750A4;
  --brand-primary-dark:  #4F378B;
  --brand-secondary:     #625B71;
  --brand-tertiary:      #7D5260;

  /* ── Income / Expense ── */
  --color-income:        #1B8554;
  --color-income-bg:     #E6F4ED;
  --color-income-light:  #34A770;
  --color-expense:       #BA1A1A;
  --color-expense-bg:    #FCDAD7;
  --color-expense-light: #E46962;

  /* ── Neutral Scale ── */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F2FA;
  --neutral-100: #EDE8F5;
  --neutral-200: #E0DBE8;
  --neutral-300: #C9C4D0;
  --neutral-400: #A8A3B0;
  --neutral-500: #79747E;
  --neutral-600: #49454F;
  --neutral-700: #322F37;
  --neutral-800: #211F26;
  --neutral-900: #1C1B1F;
  --neutral-950: #141218;

  /* ── Light Theme (default) ── */
  --md-primary:            #6750A4;
  --md-on-primary:         #FFFFFF;
  --md-primary-container:  #EADDFF;
  --md-on-primary-container: #21005D;

  --md-secondary:          #625B71;
  --md-on-secondary:       #FFFFFF;
  --md-secondary-container:#E8DEF8;
  --md-on-secondary-container: #1D192B;

  --md-tertiary:           #7D5260;
  --md-on-tertiary:        #FFFFFF;
  --md-tertiary-container: #FFD8E4;
  --md-on-tertiary-container: #31111D;

  --md-error:              #B3261E;
  --md-on-error:           #FFFFFF;
  --md-error-container:    #F9DEDC;
  --md-on-error-container: #410E0B;

  --md-surface:            #FFFBFE;
  --md-surface-dim:        #DED8E1;
  --md-surface-bright:     #FFFBFE;
  --md-surface-container-lowest:  #FFFFFF;
  --md-surface-container-low:     #F7F2FA;
  --md-surface-container:         #F3EDF7;
  --md-surface-container-high:    #ECE6F0;
  --md-surface-container-highest: #E6E0E9;

  --md-on-surface:         #1C1B1F;
  --md-on-surface-variant: #49454F;
  --md-outline:            #79747E;
  --md-outline-variant:    #CAC4D0;

  --md-scrim:              rgba(0, 0, 0, 0.32);
  --md-shadow:             rgba(0, 0, 0, 0.12);

  /* ── Background / Surface aliases ── */
  --bg-page:         var(--md-surface);
  --bg-card:         var(--md-surface-container-lowest);
  --bg-card-hover:   var(--md-surface-container-low);
  --bg-sidebar:      var(--md-surface-container-low);
  --bg-nav:          var(--md-surface-container);
  --text-primary:    var(--md-on-surface);
  --text-secondary:  var(--md-on-surface-variant);
  --text-disabled:   var(--md-outline);
  --border-color:    var(--md-outline-variant);

  /* ── Shapes ── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-3xl:  28px;
  --radius-full: 9999px;

  /* ── Spacing Scale ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Typography ── */
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;

  --text-display-lg: 700 57px/64px var(--font-family);
  --text-display-md: 700 45px/52px var(--font-family);
  --text-display-sm: 600 36px/44px var(--font-family);
  --text-headline-lg: 600 32px/40px var(--font-family);
  --text-headline-md: 600 28px/36px var(--font-family);
  --text-headline-sm: 600 24px/32px var(--font-family);
  --text-title-lg: 600 22px/28px var(--font-family);
  --text-title-md: 600 16px/24px var(--font-family);
  --text-title-sm: 600 14px/20px var(--font-family);
  --text-body-lg: 400 16px/24px var(--font-family);
  --text-body-md: 400 14px/20px var(--font-family);
  --text-body-sm: 400 12px/16px var(--font-family);
  --text-label-lg: 500 14px/20px var(--font-family);
  --text-label-md: 500 12px/16px var(--font-family);
  --text-label-sm: 500 11px/16px var(--font-family);

  /* ── Elevations ── */
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(0,0,0,.12), 0 1px 3px 1px rgba(0,0,0,.08);
  --elevation-2: 0 1px 2px rgba(0,0,0,.12), 0 2px 6px 2px rgba(0,0,0,.08);
  --elevation-3: 0 4px 8px 3px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.12);
  --elevation-4: 0 6px 10px 4px rgba(0,0,0,.10), 0 2px 3px rgba(0,0,0,.12);
  --elevation-5: 0 8px 12px 6px rgba(0,0,0,.10), 0 4px 4px rgba(0,0,0,.12);

  /* ── Transitions ── */
  --transition-fast:   120ms cubic-bezier(.2, 0, 0, 1);
  --transition-base:   200ms cubic-bezier(.2, 0, 0, 1);
  --transition-slow:   400ms cubic-bezier(.2, 0, 0, 1);
  --transition-spring: 500ms cubic-bezier(.34, 1.56, .64, 1);

  /* ── Z-index scale ── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  1000;
  --z-modal:    2000;
  --z-toast:    99999;
  --z-splash:   999999;

  /* ── Sidebar ── */
  --sidebar-width: 264px;
  --topbar-height: 64px;
  --bottomnav-height: 80px;

  /* ── Premium / Gold ── */
  --premium-gold:        #C9A227;
  --premium-gold-light:  #F4CF4E;
  --premium-gold-dark:   #9C7A1A;
  --premium-gold-muted:  #7A5F10;
  --premium-gradient:    linear-gradient(135deg, #9C7A1A 0%, #C9A227 40%, #F4CF4E 65%, #C9A227 100%);
  --premium-gradient-bg: linear-gradient(135deg, #1a1200 0%, #2a1f00 50%, #1a1200 100%);
  --premium-glow:        0 0 20px rgba(201, 162, 39, 0.35), 0 4px 16px rgba(201, 162, 39, 0.2);
}

/* ── Dark Theme ── */
[data-theme="dark"] {
  --md-primary:            #D0BCFF;
  --md-on-primary:         #381E72;
  --md-primary-container:  #4F378B;
  --md-on-primary-container: #EADDFF;

  --md-secondary:          #CCC2DC;
  --md-on-secondary:       #332D41;
  --md-secondary-container:#4A4458;
  --md-on-secondary-container: #E8DEF8;

  --md-tertiary:           #EFB8C8;
  --md-on-tertiary:        #492532;
  --md-tertiary-container: #633B48;
  --md-on-tertiary-container: #FFD8E4;

  --md-error:              #F2B8B5;
  --md-on-error:           #601410;
  --md-error-container:    #8C1D18;
  --md-on-error-container: #F9DEDC;

  --md-surface:            #141218;
  --md-surface-dim:        #141218;
  --md-surface-bright:     #3B383E;
  --md-surface-container-lowest:  #0F0D13;
  --md-surface-container-low:     #1D1B20;
  --md-surface-container:         #211F26;
  --md-surface-container-high:    #2B2930;
  --md-surface-container-highest: #36343B;

  --md-on-surface:         #E6E1E5;
  --md-on-surface-variant: #CAC4D0;
  --md-outline:            #938F99;
  --md-outline-variant:    #49454F;

  --color-income:          #34A770;
  --color-income-bg:       #0D2B1D;
  --color-income-light:    #4DC88A;
  --color-expense:         #E46962;
  --color-expense-bg:      #2D1010;
  --color-expense-light:   #FF8A80;
}

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  /* Note: scroll-behavior:smooth removed — causes issues with hash routing */
}

body {
  font: var(--text-body-lg);
  font-family: var(--font-family);
  color: var(--text-primary);
  background: var(--bg-page);
  overflow-x: hidden;
  transition: background-color var(--transition-slow), color var(--transition-slow);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: var(--font-family);
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select {
  font-family: var(--font-family);
}

ul, ol {
  list-style: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--md-outline-variant);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--md-outline);
}

/* ── Selection ── */
::selection {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}