/*
 * Mobile design tokens — customer-facing pages only.
 * Single source of truth for spacing/type/radius/motion so retuning for a
 * real device is a one-file edit. See resources/docs/MOBILE_STYLE_GUIDE.md.
 */
@font-face {
  font-family: "Maison Neue";
  src: url("/fonts/fonnts.com-Maison_Neue_Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Maison Neue";
  src: url("/fonts/fonnts.com-Maison_Neue_Book.ttf") format("truetype");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Maison Neue";
  src: url("/fonts/fonnts.com-Maison_Neue_Bold.ttf") format("truetype");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

html,
body,
button,
input,
select,
textarea {
  font-family: "Maison Neue", Arial, sans-serif !important;
}

:root {
  /* Color — Gojek green as the single brand accent, not a rainbow of button colors */
  --color-primary: #00AA13;       /* Gojek green — primary CTAs, active states, links */
  --color-primary-dark: #00870F;  /* pressed/hover state, balance-card gradient end */
  --color-primary-tint: #E6F7E8;  /* selected chip bg, subtle success/info surfaces */
  --color-ink: #1A1A1A;           /* primary text — near-black, not pure #000 */
  --color-ink-muted: #6B7280;     /* secondary text/meta */
  --color-surface: #FFFFFF;       /* card background */
  --color-surface-alt: #F5F6F7;   /* page background behind cards */
  --color-border: #ECEDEE;        /* hairline only, used sparingly */
  --color-danger: #E02020;        /* remove/cancel actions */
  --color-warning: #B45309;
  --color-warning-tint: #FFF7E6;
  --color-info: #1769AA;
  --color-info-tint: #EAF4FD;
  --color-success: var(--color-primary-dark);
  --color-success-tint: var(--color-primary-tint);

  /* Spacing — 4px base grid */
  --space-1: 0.25rem;  /* 4px  */
  --space-2: 0.5rem;   /* 8px  */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */

  /* Type scale — one clear hierarchy */
  --font-xs: 0.75rem;    /* 12px — meta/captions/timestamps */
  --font-sm: 0.875rem;   /* 14px — secondary text */
  --font-base: 1rem;     /* 16px — body; never smaller, prevents iOS auto-zoom on input focus */
  --font-lg: 1.125rem;   /* 18px — emphasized body/list titles, item names */
  --font-xl: 1.375rem;   /* 22px — section headings, balance amount */
  --font-2xl: 1.75rem;   /* 28px — page/hero headings */
  --font-weight-price: 700;
  --line-tight: 1.2;
  --line-normal: 1.5;

  /* Radius — rounder than typical Bootstrap defaults */
  --radius-sm: 8px;    /* chips, small buttons */
  --radius-md: 16px;   /* cards, inputs */
  --radius-lg: 24px;   /* bottom sheets, balance card */
  --radius-full: 999px; /* pills, category chips, avatars, quantity-stepper buttons */

  /* Elevation — shadow instead of hard borders */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.14);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* Touch target floor (HIG 44px / M3 48dp — use the larger) */
  --tap-min: 44px;

  /* Safe-area */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);

  /* Member application shell */
  --app-header-height: 64px;
  --bottom-nav-height: 68px;
  --portal-nav-height: 68px;
  --portal-sticky-action-height: 72px;
  --content-standard: 1200px;
  --content-task: 760px;
  --content-form: 640px;
  --sheet-max-width: 520px;
  --focus-ring: 0 0 0 3px rgba(0, 170, 19, 0.24);
  --disabled-opacity: 0.48;
}

/* Global tap-feedback reset: replace the default blue/grey flash with an
   explicit, native-feeling pressed state. Pages may override with their own
   :active rule where a component needs different feedback. */
a,
button,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

a:active,
button:active,
[role="button"]:active {
  transform: scale(0.97);
  transition: transform var(--duration-fast) var(--ease-standard);
}

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