/* ============================================================
   Settle Money — Design tokens
   Purple-first fintech palette, mobile-first sizing scale.
   ============================================================ */
:root {
  /* Brand */
  --purple-900: #3B1E78;
  --purple-800: #4C1D95;
  --purple-700: #5B21B6;
  --purple-600: #6D28D9;
  --purple-500: #8B5CF6;
  --purple-400: #A78BFA;
  --purple-200: #DDD6FE;
  --lavender:   #EDE9FE;

  --brand:        var(--purple-600);
  --brand-strong: var(--purple-800);
  --brand-soft:   var(--purple-500);

  /* Surfaces */
  --bg:          #F8F7FF;
  --bg-tint:     #F2EFFF;
  --surface:     #FFFFFF;
  --surface-2:   #FBFAFF;
  --surface-glass: rgba(255, 255, 255, 0.72);
  --dark-bg:     #1E1B2E;

  /* Text */
  --text:        #1F1B2E;
  --text-muted:  #6B6580;
  --text-faint:  #9C97AD;
  --text-invert: #FFFFFF;

  /* Ink for the always-purple chrome (top bar, bottom nav). These never
     flip with the theme — the bars are purple in light and dark alike. */
  --text-invert-fixed: #FFFFFF;
  --purple-700-fixed:  #5B21B6;

  /* Semantic */
  --success: #22C55E;
  --success-soft: #DCFCE7;
  --warning: #F59E0B;
  --warning-soft: #FEF3C7;
  --danger:  #EF4444;
  --danger-soft: #FEE2E2;
  --info:    #3B82F6;

  /* Lines */
  --line:       #ECE8FA;
  --line-strong:#DCD5F2;

  /* Gradients */
  --grad-brand:  linear-gradient(135deg, #6D28D9, #8B5CF6);
  --grad-deep:   linear-gradient(140deg, #4C1D95 0%, #6D28D9 55%, #8B5CF6 100%);
  --grad-soft:   linear-gradient(135deg, #EDE9FE, #F8F7FF);
  --grad-owe:    linear-gradient(135deg, #F97066, #EF4444);
  --grad-owed:   linear-gradient(135deg, #34D399, #22C55E);
  --grad-spend:  linear-gradient(135deg, #FBBF24, #F59E0B);

  /* Shadows — tinted purple, never flat grey */
  --shadow-xs: 0 1px 2px rgba(76, 29, 149, .06);
  --shadow-sm: 0 2px 8px rgba(76, 29, 149, .07);
  --shadow-md: 0 8px 24px rgba(76, 29, 149, .10);
  --shadow-lg: 0 18px 44px rgba(76, 29, 149, .16);
  --shadow-brand: 0 10px 26px rgba(109, 40, 217, .34);

  /* Radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px;

  /* Layout metrics */
  --header-h: 60px;
  --bottomnav-h: 64px;
  --sidebar-w: 264px;
  --sidebar-w-compact: 84px;
  --content-max: 1240px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: .16s;
  --t-base: .28s;
  --t-slow: .45s;

  /* Type */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fs-xs: .75rem;
  --fs-sm: .8125rem;
  --fs-base: .9375rem;
  --fs-lg: 1.0625rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;

  --z-drawer: 60;
  --z-header: 40;
  --z-nav: 45;
  --z-fab: 48;
  --z-modal: 80;
  --z-toast: 95;
}

@media (min-width: 1024px) {
  :root {
    --header-h: 72px;
    --fs-base: .9688rem;
  }
}

/* ============================================================
   Dark theme
   An explicit choice wins in both directions; with nothing stored we
   follow the operating system.
   ============================================================ */
:root[data-theme="dark"] {
  /* The brand ramp swaps roles: --lavender / --purple-200 are soft
     backgrounds and --purple-700 / --purple-800 the text on top of them,
     so in the dark the pale end becomes the ink and vice versa. */
  --purple-900: #EDE9FE;
  --purple-800: #DDD6FE;
  --purple-700: #C4B5FD;
  --purple-200: #3A2F63;
  --lavender:   #2A2344;

  --brand:        var(--purple-500);
  --brand-strong: var(--purple-400);

  --bg:            #131120;
  --bg-tint:       #191627;
  --surface:       #1E1B2E;
  --surface-2:     #262138;
  --surface-glass: rgba(30, 27, 46, .78);

  --text:        #F3F1FA;
  --text-muted:  #A8A2C0;
  --text-faint:  #7B7594;
  --text-invert: #1F1B2E;

  --success-soft: #14331F;
  --warning-soft: #3A2A0B;
  --danger-soft:  #3A1717;

  --line:        #2C2841;
  --line-strong: #3B3557;

  --grad-soft: linear-gradient(135deg, #272040, #1B1829);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .38);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, .55);
  --shadow-brand: 0 10px 26px rgba(76, 29, 149, .55);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* The brand ramp swaps roles: --lavender / --purple-200 are soft
       backgrounds and --purple-700 / --purple-800 the text on top of them,
       so in the dark the pale end becomes the ink and vice versa. */
    --purple-900: #EDE9FE;
    --purple-800: #DDD6FE;
    --purple-700: #C4B5FD;
    --purple-200: #3A2F63;
    --lavender:   #2A2344;

    --brand:        var(--purple-500);
    --brand-strong: var(--purple-400);

    --bg:            #131120;
    --bg-tint:       #191627;
    --surface:       #1E1B2E;
    --surface-2:     #262138;
    --surface-glass: rgba(30, 27, 46, .78);

    --text:        #F3F1FA;
    --text-muted:  #A8A2C0;
    --text-faint:  #7B7594;
    --text-invert: #1F1B2E;

    --success-soft: #14331F;
    --warning-soft: #3A2A0B;
    --danger-soft:  #3A1717;

    --line:        #2C2841;
    --line-strong: #3B3557;

    --grad-soft: linear-gradient(135deg, #272040, #1B1829);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .38);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
    --shadow-lg: 0 18px 44px rgba(0, 0, 0, .55);
    --shadow-brand: 0 10px 26px rgba(76, 29, 149, .55);

    color-scheme: dark;
  }
}