/* ============================================
   Seva Mitra — Design Tokens
   "Trust, in motion." A civic-fintech identity:
   the calm authority of a government seal, paced
   like a modern payments app.
   ============================================ */

:root {
  /* ---- Brand Colors ---- */
  --color-primary: #1557D6;
  --color-primary-dark: #0D3FA8;
  --color-primary-light: #E8EFFD;
  --color-bg: #F7F9FC;
  --color-white: #FFFFFF;
  --color-text: #182033;
  --color-text-secondary: #778198;
  --color-text-muted: #A2AAB8;
  --color-border: #E7EBF2;
  --color-border-strong: #D6DCE8;

  --color-success: #249A4B;
  --color-success-bg: #E7F7ED;
  --color-warning: #F39C12;
  --color-warning-bg: #FEF3E0;
  --color-error: #D64545;
  --color-error-bg: #FCEAEA;

  /* Gradients */
  --gradient-wallet: linear-gradient(135deg, #1B63E5 0%, #0D3FA8 55%, #082B7A 100%);
  --gradient-success: linear-gradient(135deg, #2CB35C 0%, #1B7F3D 100%);

  /* ---- Typography ---- */
  --font-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --fs-display: 1.75rem;   /* 28px */
  --fs-h1: 1.375rem;       /* 22px */
  --fs-h2: 1.125rem;       /* 18px */
  --fs-h3: 1rem;           /* 16px */
  --fs-body: 0.9375rem;    /* 15px */
  --fs-small: 0.8125rem;   /* 13px */
  --fs-xs: 0.6875rem;      /* 11px */

  /* ---- Spacing scale ---- */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 28px;
  --space-2xl: 36px;
  --space-3xl: 48px;

  /* ---- Radius ---- */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 3px rgba(19, 33, 68, 0.06), 0 1px 2px rgba(19, 33, 68, 0.04);
  --shadow-md: 0 6px 16px rgba(19, 33, 68, 0.08);
  --shadow-lg: 0 16px 32px rgba(19, 33, 68, 0.12);
  --shadow-wallet: 0 12px 28px rgba(13, 63, 168, 0.28);
  --shadow-focus: 0 0 0 4px rgba(21, 87, 214, 0.14);

  /* ---- Layout ---- */
  --max-width: 480px;
  --header-height: 60px;
  --bottomnav-height: 66px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 140ms;
  --duration-med: 240ms;
  --duration-slow: 420ms;

  /* ---- Z-index ---- */
  --z-header: 40;
  --z-bottomnav: 40;
  --z-sheet: 60;
  --z-modal: 70;
  --z-toast: 80;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}