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

:root {
    /* ============================================================
       COWAY THEME COLOR VARIABLES (Matching Figma Design Spec)
       ============================================================ */
    --color-primary: #00A7E1;
    --color-primary-hover: #0084B4;
    --color-primary-dark: #00739D;
    --color-accent: #8AE1FF;
    --color-accent-light: #E0F7FF;
    --color-secondary: #4B698C;
    --color-text: #333333;
    --color-text-muted: #606060;
    --color-text-light: #777777;
    --color-bg: #FFFFFF;
    --color-bg-light: #F8FAFC;
    --color-border: #E2E8F0;

    /* ============================================================
       LAYOUT DESIGN SYSTEM - 4 TIER RESPONSIVE BREAKPOINTS:
       1. Desktop (>= 1440px)
       2. Mac / Laptop (1024px - 1439px)
       3. Tablet (768px - 1023px)
       4. Mobile (Besar: 480px - 767px | Kecil: < 480px)
       ============================================================ */

    /* 1. DESKTOP (1440px+) */
    --gutter-desktop: 60px;
    --section-padding-desktop: 70px;
    --max-container-desktop: 1440px;

    /* 2. MAC / LAPTOP (1024px - 1439px) */
    --gutter-mac: 40px;
    --section-padding-mac: 56px;
    --max-container-mac: 1240px;

    /* 3. TABLET (768px - 1023px) */
    --gutter-tablet: 28px;
    --section-padding-tablet: 44px;

    /* 4. MOBILE BESAR (480px - 767px) */
    --gutter-mobile: 20px;
    --section-padding-mobile: 32px;

    /* 4. MOBILE KECIL (< 480px) */
    --gutter-mobile-sm: 16px;
    --section-padding-mobile-sm: 24px;

    /* Transitions */
    --transition-fast: 0.25s ease;
    --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--color-text);
    background-color: var(--color-bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   CONTAINER & LAYOUT UTILITIES
   ============================================================ */
.site-container,
.tk-container {
    max-width: var(--max-container-desktop);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter-desktop);
    padding-right: var(--gutter-desktop);
    width: 100%;
    box-sizing: border-box;
}

.section-padding {
    padding-top: var(--section-padding-desktop);
    padding-bottom: var(--section-padding-desktop);
}

/* ============================================================
   RESPONSIVE MEDIA QUERIES (4 TIERS)
   ============================================================ */

/* TIER 2: MAC / LAPTOP (1024px - 1439px) */
@media (max-width: 1439px) and (min-width: 1024px) {
    .site-container,
    .tk-container {
        max-width: var(--max-container-mac);
        padding-left: var(--gutter-mac);
        padding-right: var(--gutter-mac);
    }

    .section-padding {
        padding-top: var(--section-padding-mac);
        padding-bottom: var(--section-padding-mac);
    }
}

/* TIER 3: TABLET (768px - 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
    .site-container,
    .tk-container {
        padding-left: var(--gutter-tablet);
        padding-right: var(--gutter-tablet);
    }

    .section-padding {
        padding-top: var(--section-padding-tablet);
        padding-bottom: var(--section-padding-tablet);
    }
}

/* TIER 4: MOBILE BESAR (480px - 767px) */
@media (max-width: 767px) and (min-width: 480px) {
    .site-container,
    .tk-container {
        padding-left: var(--gutter-mobile);
        padding-right: var(--gutter-mobile);
    }

    .section-padding {
        padding-top: var(--section-padding-mobile);
        padding-bottom: var(--section-padding-mobile);
    }
}

/* TIER 4: MOBILE KECIL (< 480px) */
@media (max-width: 479px) {
    .site-container,
    .tk-container {
        padding-left: var(--gutter-mobile-sm);
        padding-right: var(--gutter-mobile-sm);
    }

    .section-padding {
        padding-top: var(--section-padding-mobile-sm);
        padding-bottom: var(--section-padding-mobile-sm);
    }
}

/* ============================================================
   GLOBAL UNIFIED MOBILE TYPOGRAPHY STANDARDS (< 768px)
   ============================================================ */
@media (max-width: 767px) {
    h1, .mobile-h1 {
        font-size: 26px !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
    }

    h2, .mobile-h2 {
        font-size: 24px !important;
        line-height: 1.35 !important;
        font-weight: 700 !important;
    }

    h3, .mobile-h3 {
        font-size: 18px !important;
        line-height: 1.4 !important;
        font-weight: 600 !important;
    }

    button,
    .btn,
    .btn-primary,
    .btn-primary-pill,
    .btn-outline-pill,
    .btn-cyan-pill,
    .btn-cyan-outline-pill,
    .btn-white-cyan-pill,
    .btn-white-cyan-pill-black,
    .btn-white-dark-pill,
    .btn-solid-pill,
    .cta-banner-btn,
    .hero-cta-btn,
    .btn-career-submit,
    .promo-btn-container {
        font-size: 15px !important;
    }
}