/* Design tokens extracted from competitor screenshots (visual reference only). */
:root {
    --app-max-width: 430px;
    --page-padding: 20px;
    --bottom-nav-height: 64px;
    --header-height: 52px;
    --input-height: 48px;
    --button-height: 48px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --app-bottom-offset: calc(var(--bottom-nav-height) + var(--safe-bottom));

    --color-primary: #1e4ed8;
    --color-primary-hover: #163eb0;
    --color-primary-soft: #e8eefc;
    --color-background: #f3f6fb;
    --color-surface: #ffffff;
    --color-text-primary: #0f172a;
    --color-text-secondary: #64748b;
    --color-text-muted: #94a3b8;
    --color-border: #e2e8f0;
    --color-danger: #dc2626;
    --color-success: #16a34a;
    --color-overlay: rgba(15, 23, 42, 0.35);

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 28px;
    --radius-pill: 999px;

    --shadow-card: 0 12px 32px rgba(15, 23, 42, 0.12);
    --shadow-modal: 0 24px 48px rgba(15, 23, 42, 0.18);
    --shadow-nav: 0 -4px 16px rgba(15, 23, 42, 0.06);

    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-md: 15px;
    --font-size-lg: 18px;
    --font-size-xl: 28px;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --z-sticky: 40;
    --z-bottom-nav: 90;
    --z-modal: 1050;
}