/* ============================================
   OneMoment - Theme Variables (theme.css)
   Brand: One Moment
   Primary: Teal/Green #00A896
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
    /* === Colors === */
    --primary: #00A896;
    --primary-dark: #008C7D;
    --primary-light: #E6F7F5;
    --primary-bg: #00A896;

    --accent-yellow: #FFB800;
    --accent-orange: #FF6B35;
    --accent-pink: #FF4F7B;

    --dark: #1A2332;
    --dark-2: #2D3A4A;
    --dark-3: #3E4D5C;

    --gray-100: #F4F6F8;
    --gray-200: #E8ECF0;
    --gray-300: #CDD5DD;
    --gray-400: #9BAAB8;
    --gray-500: #6B7B8D;
    --gray-600: #4A5568;

    --white: #FFFFFF;
    --text-body: #4A5568;
    --text-muted: #9BAAB8;

    /* === Typography === */
    --font-primary: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Inter', sans-serif;

    --fs-xs: 0.75rem;
    /* 12px */
    --fs-sm: 0.875rem;
    /* 14px */
    --fs-base: 1rem;
    /* 16px */
    --fs-md: 1.125rem;
    /* 18px */
    --fs-lg: 1.25rem;
    /* 20px */
    --fs-xl: 1.5rem;
    /* 24px */
    --fs-2xl: 1.875rem;
    /* 30px */
    --fs-3xl: 2.25rem;
    /* 36px */
    --fs-4xl: 2.75rem;
    /* 44px */
    --fs-5xl: 3.5rem;
    /* 56px */

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* === Spacing === */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* === Radius === */
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 2rem;
    --radius-full: 9999px;

    /* === Shadows === */
    --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 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.14);
    --shadow-primary: 0 8px 24px rgba(0, 168, 150, 0.35);

    /* === Transitions === */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* === Layout === */
    --container-max: 1200px;
    --container-wide: 1400px;
    --nav-height: 70px;
    --mobile-nav-height: 64px;
    --bottom-nav-height: 68px;
}