/* ============================================
   GOJEK DESIGN TOKENS
   ============================================ */

:root {
    /* ============================================
       TYPOGRAPHY - Inter
       ============================================ */

    --font-family-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;

    /* ============================================
       COLORS - Vibrant & Bold
       ============================================ */

    /* Brand Colors */
    --brand-primary: #00AA13;
    /* Gojek Green */
    --brand-secondary: #EE2737;
    /* Red/Pink */
    --brand-tertiary: #FF6B00;
    /* Orange */
    --brand-accent: #00AED6;
    /* Blue */

    /* Background Colors */
    --ui-background: #F9F9F9;
    /* Light Gray/White */
    --ui-surface: #FFFFFF;
    /* Pure White */
    --ui-surface-highlight: #F4F8F1;
    /* Light Lime Tint */

    /* Text Colors */
    --text-primary: #1C1C1C;
    /* Near Black */
    --text-secondary: #4A4A4A;
    /* Dark Gray */
    --text-tertiary: #999999;
    /* Light Gray */
    --text-on-brand: #FFFFFF;
    /* White on Brand */

    /* Border Colors */
    --border-subtle: #E0E0E0;
    --border-strong: #C6C6C6;
    --border-brand: #00AA13;

    /* ============================================
       SPACING - Generous & Airy
       ============================================ */

    --spacing-01: 0.25rem;
    /* 4px */
    --spacing-02: 0.5rem;
    /* 8px */
    --spacing-03: 0.75rem;
    /* 12px */
    --spacing-04: 1rem;
    /* 16px */
    --spacing-05: 1.5rem;
    /* 24px */
    --spacing-06: 2rem;
    /* 32px */
    --spacing-07: 3rem;
    /* 48px */
    --spacing-08: 4rem;
    /* 64px */
    --spacing-09: 6rem;
    /* 96px */

    /* ============================================
       TYPOGRAPHY SCALE
       ============================================ */

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;
    --font-size-4xl: 3rem;

    --font-weight-regular: 400;
    --font-weight-medium: 600;
    /* Asphalt uses 600 for medium/semibold feel */
    --font-weight-bold: 700;
    --font-weight-black: 900;

    /* ============================================
       BORDER RADIUS - Friendly & Rounded
       ============================================ */

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 9999px;

    /* ============================================
       SHADOWS - Soft & Modern
       ============================================ */

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-brand: 0 4px 16px rgba(0, 170, 19, 0.2);

    /* ============================================
       GRID SYSTEM
       ============================================ */

    --container-max: 1200px;
    --grid-gutter: 2rem;
}

/* ============================================
   BASE STYLES
   ============================================ */

body {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-md);
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--ui-background);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ============================================
   UTILITIES
   ============================================ */

.container {
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
    padding: 0 var(--spacing-04);
    box-sizing: border-box;
}

@media (min-width: 1200px) {
    .container {
        max-width: var(--container-max);
    }
}

.heading-hero {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-black);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.heading-1 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.heading-2 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
}

.heading-3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
}

.heading-4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
}

.footer-vibrant {
    background: linear-gradient(135deg, #00AA13 0%, #00D91A 50%, #00AA13 100%);
    position: relative;
    padding: var(--spacing-07) 0 0;
    margin-top: auto;
    overflow: hidden;
    width: 100%;
}

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        gap: var(--spacing-08);
        margin-bottom: var(--spacing-08);
    }
}

.footer-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: white;
    margin-bottom: var(--spacing-04);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    padding-bottom: var(--spacing-03);
}

.footer-description {
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.6;
    margin-bottom: var(--spacing-05);
    font-size: var(--font-size-md);
}

.text-brand {
    color: var(--brand-primary);
}

.text-secondary {
    color: var(--text-secondary);
}