/* =========================================
   Mocy Design Tokens
   ========================================= */
:root {
  /* Brand */
  --brand-50:  #EFF6FF;
  --brand-100: #DBEAFE;
  --brand-200: #BFDBFE;
  --brand-300: #93C5FD;
  --brand-400: #60A5FA;
  --brand-500: #3B82F6;
  --brand-600: #1F6FEB;   /* Primary */
  --brand-700: #1D4ED8;
  --brand-800: #1E40AF;
  --brand-900: #1E3A8A;

  /* Accent */
  --expense: #FF5C5C;
  --income:  #22C55E;
  --gold:    #F59E0B;
  --plum:    #8B5CF6;

  /* Neutrals */
  --ink-900: #0B1530;
  --ink-800: #111A36;
  --ink-700: #1E2A4A;
  --ink-600: #334063;
  --ink-500: #4B5878;
  --ink-400: #6C7896;
  --ink-300: #9AA4BE;
  --ink-200: #C7CEE0;
  --ink-100: #E5E9F3;
  --ink-50:  #F4F6FC;

  /* Surfaces */
  --surface-0: #FFFFFF;
  --surface-1: #F8FAFF;
  --surface-2: #EEF4FF;
  --surface-3: #E1ECFF;

  /* Gradients */
  --grad-sky: linear-gradient(135deg, #DCEBFF 0%, #F4F8FF 60%, #FFFFFF 100%);
  --grad-brand: linear-gradient(135deg, #1F6FEB 0%, #3B82F6 50%, #60A5FA 100%);
  --grad-night: linear-gradient(160deg, #0B1530 0%, #1B2A55 60%, #1F6FEB 120%);
  --grad-cta: linear-gradient(135deg, #1F6FEB 0%, #5BA0FF 100%);
  --grad-mesh:
    radial-gradient(60% 80% at 20% 10%, rgba(91, 160, 255, .35) 0%, transparent 60%),
    radial-gradient(50% 70% at 90% 20%, rgba(31, 111, 235, .25) 0%, transparent 65%),
    radial-gradient(40% 60% at 50% 100%, rgba(140, 195, 255, .35) 0%, transparent 70%);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(11, 21, 48, .06);
  --shadow-sm: 0 2px 8px rgba(11, 21, 48, .06);
  --shadow-md: 0 12px 24px -8px rgba(31, 111, 235, .18);
  --shadow-lg: 0 24px 48px -16px rgba(31, 111, 235, .28);
  --shadow-xl: 0 40px 80px -24px rgba(31, 111, 235, .35);
  --shadow-glow: 0 0 60px rgba(91, 160, 255, .35);

  /* Radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-2xl: 48px;
  --r-full: 9999px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Typography */
  --font-display: "Lexend", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-hero:  clamp(2.6rem, 6.2vw, 5.4rem);
  --fs-h1:    clamp(2.2rem, 4vw, 3.4rem);
  --fs-h2:    clamp(1.7rem, 2.6vw, 2.4rem);
  --fs-h3:    clamp(1.25rem, 1.8vw, 1.5rem);
  --fs-lead:  clamp(1.05rem, 1.3vw, 1.25rem);
  --fs-body:  1rem;
  --fs-sm:    0.875rem;
  --fs-xs:    0.78rem;

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.65;
  --lh-prose: 1.78;

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 160ms;
  --t-base: 240ms;
  --t-slow: 420ms;
  --t-xslow: 720ms;

  /* Layout */
  --container: 1200px;
  --container-narrow: 880px;

  /* Z-index scale */
  --z-base: 1;
  --z-decor: 5;
  --z-content: 10;
  --z-sticky: 40;
  --z-nav: 50;
  --z-modal: 80;
}

@media (prefers-color-scheme: dark) {
  /* We keep the landing light-first for brand recognition; opt-out of system dark. */
}