/* ============================================================
   MyInstaCash - Design Tokens
   Brand values sourced from config/myinstacash.json
   ============================================================ */

:root {
  /* --- Brand colors (config/myinstacash.json) --- */
  --primary: #FC6A03;          /* PRIMARY_COLOR  0xFFFC6A03 */
  --primary-600: #E35F00;
  --primary-700: #C95400;
  --secondary: #02096A;        /* SECONDARY_COLOR 0xFF02096A */
  --accent: #023BE5;           /* ACCENT_COLOR   0xFF023BE5 */
  --gradient-2: #FC8403;       /* GRADIENT_COLOR 0xFFFC8403 */
  --success: #16A34A;          /* SUCCESS_COLOR  0xFF16A34A */
  --warning: #D4A017;          /* WARNING_COLOR  0xFFD4A017 */

  /* Background gradient (config) */
  --bg: #FFFFFF;               /* BACKGROUND_GRADIENT_START 0xFFFFFFFF */
  --bg-tint: #FFF4EA;          /* BACKGROUND_GRADIENT_END   0xFFFFF4EA */

  /* --- Neutral grayscale --- */
  --ink-900: #0B1020;
  --ink-800: #111827;
  --ink-700: #1F2937;
  --ink-600: #374151;
  --ink-500: #6B7280;
  --ink-400: #9CA3AF;
  --ink-300: #D1D5DB;
  --ink-200: #E5E7EB;
  --ink-100: #F3F4F6;
  --ink-50:  #F9FAFB;
  --white:   #FFFFFF;

  /* --- Gradients --- */
  --grad-brand: linear-gradient(135deg, var(--primary) 0%, var(--gradient-2) 100%);
  --grad-cta:   linear-gradient(135deg, var(--primary) 0%, var(--primary-600) 100%);
  --grad-cool:  linear-gradient(135deg, var(--accent) 0%, var(--secondary) 100%);
  --grad-text:  linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);

  /* --- Typography (config: DISPLAY_FONT Poppins / BODY_FONT Inter) --- */
  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid type scale */
  --fs-hero: clamp(2.5rem, 1.6rem + 4.2vw, 4.5rem);
  --fs-h2:   clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
  --fs-h3:   clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm:   0.875rem;
  --fs-xs:   0.75rem;

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  /* --- Spacing scale --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* --- Radii (config) --- */
  --r-chip: 8px;     /* CHIP_RADIUS */
  --r-btn: 12px;     /* BUTTON_RADIUS / INPUT_RADIUS */
  --r-card: 16px;    /* CARD_RADIUS */
  --r-lg: 20px;      /* DIALOG/BOTTOM_SHEET_RADIUS */
  --r-xl: 28px;
  --r-pill: 999px;

  /* --- Shadows (premium elevation) --- */
  --sh-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --sh-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --sh-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --sh-lg: 0 18px 48px rgba(15, 23, 42, 0.12);
  --sh-xl: 0 30px 70px rgba(15, 23, 42, 0.16);
  --sh-primary: 0 14px 32px rgba(252, 106, 3, 0.32);
  --sh-glow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset;

  /* --- Glass --- */
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-blur: 16px;

  /* --- Layout (rem-based so it scales with root font on large screens) --- */
  --container: 82.5rem;   /* 1320px @16px, grows on big monitors */
  --container-narrow: 51rem;
  --header-h: 72px;

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 600ms;
}