/* =============================================
   FIT LITE — Design System (Stitch-based)
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root {
    /* === BRAND COLORS === */
    --primary: #13ec5b;
    --primary-dark: #0fc44a;
    --primary-light: #4ff07a;
    --primary-rgb: 19, 236, 91;

    /* === BACKGROUNDS === */
    --bg: #102216;
    --bg-elevated: #15271c;
    --surface: #1c2e22;
    --surface-2: #243b2a;
    --surface-3: #2d4a33;

    /* Legacy alias (backwards compat) */
    --secondary: var(--bg);
    --card: var(--surface);

    /* === TEXT === */
    --text-primary: #f1f5f1;
    --text-secondary: #a0b5a6;
    --text-muted: #5e7564;

    /* === BORDERS === */
    --border: rgba(19, 236, 91, 0.10);
    --border-strong: rgba(19, 236, 91, 0.20);
    --border-subtle: rgba(255, 255, 255, 0.05);

    /* === STATUS === */
    --danger: #f87171;
    --danger-bg: rgba(248, 113, 113, 0.12);
    --success: #13ec5b;
    --warning: #fbbf24;
    --info: #60a5fa;

    /* === SHADOWS === */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 24px rgba(19, 236, 91, 0.18);
    --shadow-glow-sm: 0 0 12px rgba(19, 236, 91, 0.12);

    /* === SPACING / RADIUS === */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* === TYPOGRAPHY === */
    --font: 'Lexend', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-xs: 0.6875rem;
    /* 11px */
    --font-sm: 0.8125rem;
    /* 13px */
    --font-base: 0.9375rem;
    /* 15px */
    --font-md: 1rem;
    /* 16px */
    --font-lg: 1.125rem;
    /* 18px */
    --font-xl: 1.375rem;
    /* 22px */
    --font-2xl: 1.75rem;
    /* 28px */
    --font-3xl: 2.25rem;
    /* 36px */

    /* === LAYOUT === */
    --nav-height: 56px;
    --header-height: 64px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --max-width: 480px;

    /* === TRANSITIONS === */
    --transition-fast: 120ms ease;
    --transition-base: 220ms ease;
    --transition-slow: 380ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Material Symbols — filled variant */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}