/* WashPass Design Tokens — UIStyle.md (Navy + Emerald, Inter, Slate scale) */

:root {
  /* ===== BRAND ===== */
  --navy:        #0A1628;   /* primary, app bar, gradient start */
  --navy-light:  #1E293B;   /* gradient end */
  --emerald:     #10B981;   /* secondary, accent, success */
  --emerald-dark:#059669;

  /* ===== SEMANTIC ===== */
  --blue:   #3B82F6;        /* info */
  --purple: #6366F1;        /* tertiary */
  --amber:  #F59E0B;        /* warning, pending */
  --red:    #EF4444;        /* error, debit, blocked */

  /* ===== SLATE NEUTRALS ===== */
  --slate-50:  #F8FAFC;     /* page background */
  --slate-100: #F1F5F9;     /* divider light, chip bg */
  --slate-200: #E2E8F0;     /* divider, border */
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;     /* disabled, muted */
  --slate-500: #64748B;     /* secondary text */
  --slate-700: #334155;     /* drawer text */
  --slate-900: #0F172A;     /* primary text */

  /* ===== ALIASES (legacy compat with existing wp-* classes) ===== */
  --primary:                 var(--navy);
  --primary-container:       var(--navy-light);
  --on-primary:              #ffffff;
  --on-primary-container:    var(--slate-100);
  --secondary:               var(--emerald);
  --secondary-container:     #ECFDF5;
  --on-secondary-container:  var(--emerald-dark);
  --tertiary:                var(--purple);
  --tertiary-container:      #F5F3FF;
  --on-tertiary-container:   #4338CA;
  --accent:                  var(--emerald);
  --accent-hover:            var(--emerald-dark);

  --error:                   var(--red);
  --error-container:         #FEF2F2;
  --on-error-container:      #B91C1C;
  --warning:                 var(--amber);
  --warning-container:       #FFF7ED;
  --info:                    var(--blue);
  --info-container:          #EFF6FF;

  /* ===== SURFACES ===== */
  --background:                  var(--slate-50);
  --surface:                     #ffffff;
  --surface-container-lowest:    #ffffff;
  --surface-container-low:       var(--slate-50);
  --surface-container:           var(--slate-100);
  --surface-container-high:      var(--slate-200);
  --surface-container-highest:   #DDE3EA;
  --surface-dim:                 #D8DEE5;
  --surface-bright:              #ffffff;

  --on-surface:           var(--slate-900);
  --on-surface-variant:   var(--slate-500);
  --outline:              var(--slate-400);
  --outline-variant:      var(--slate-200);
  --divider:              var(--slate-200);

  /* ===== RADII ===== */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* ===== SHADOWS ===== */
  --shadow-card:        0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-card-hover:  0 8px 24px rgba(10, 22, 40, 0.08);
  --shadow-hero:        0 20px 50px rgba(10, 22, 40, 0.10);
  --shadow-fab:         0 12px 30px rgba(16, 185, 129, 0.30);
  --shadow-side:        2px 0 12px rgba(15, 23, 42, 0.04);
  --shadow-bottom-nav:  0 -2px 10px rgba(15, 23, 42, 0.05);

  /* ===== SPACING ===== */
  --stack-sm: 0.5rem;
  --stack-md: 1rem;
  --stack-lg: 1.5rem;
  --gutter: 1rem;
  --section-gap: 1.75rem;

  /* ===== TYPOGRAPHY ===== */
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-display-stat: 32px;
  --fs-headline-xl:  24px;
  --fs-headline-lg:  20px;
  --fs-headline-md:  18px;
  --fs-body-lg:      15px;
  --fs-body-md:      14px;
  --fs-body-sm:      13px;
  --fs-label-md:     12px;
  --fs-label-sm:     11px;

  --lh-display-stat: 40px;
  --lh-headline-xl:  32px;
  --lh-headline-lg:  28px;
  --lh-headline-md:  26px;
  --lh-body-lg:      22px;
  --lh-body-md:      20px;
  --lh-body-sm:      18px;
  --lh-label-md:     16px;

  /* ===== TRANSITIONS ===== */
  --t-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base:   200ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:   300ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ===== Z-INDEX ===== */
  --z-drawer:    50;
  --z-appbar:    60;
  --z-bottom-nav:1100;
  --z-modal:     2000;
  --z-toast:     3000;
}

/* ===== BASE ===== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--background);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Headings — Inter (no serif) */
h1, h2, h3, h4, h5, h6, .headline {
  font-family: var(--font-display);
  color: var(--slate-900);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}
h1 { font-size: var(--fs-headline-xl); line-height: var(--lh-headline-xl); }
h2 { font-size: var(--fs-headline-lg); line-height: var(--lh-headline-lg); font-weight: 700; }
h3 { font-size: var(--fs-headline-md); line-height: var(--lh-headline-md); font-weight: 600; }
h4 { font-size: var(--fs-body-lg);     line-height: var(--lh-body-lg);     font-weight: 600; }
h5, h6 { font-size: var(--fs-body-md); line-height: var(--lh-body-md); font-weight: 600; }

/* Stats — big numeric */
.display-stat,
.font-display-stat {
  font-family: var(--font-body);
  font-size: var(--fs-display-stat);
  line-height: var(--lh-display-stat);
  font-weight: 700;
  color: var(--slate-900);
  letter-spacing: -0.03em;
}

/* Uppercase labels */
.label-md,
.font-label-md {
  font-family: var(--font-body);
  font-size: var(--fs-label-md);
  line-height: var(--lh-label-md);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate-500);
}

/* Brand wordmark */
.brand-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--emerald);
  letter-spacing: -0.02em;
}

/* Material Symbols base */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  user-select: none;
}
.material-symbols-outlined.filled { font-variation-settings: 'FILL' 1; }

/* Links */
a {
  color: var(--emerald);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--emerald-dark); }

/* Selection */
::selection {
  background: rgba(16, 185, 129, 0.20);
  color: var(--slate-900);
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--slate-50); }
::-webkit-scrollbar-thumb {
  background: var(--slate-300);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--slate-400); }