/* ═══════════════════════════════════════════════════════════
   BALANU DESIGN TOKENS v2.0
   Single source of truth untuk warna, radius, spacing, typography
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ═══ WARNA UTAMA ═══ */
    --balanu-green:           #059669;
    --balanu-green-light:     #10b981;
    --balanu-green-dark:      #047857;
    --balanu-green-darker:    #065f46;
    --balanu-green-soft:      #ecfdf5;
    --balanu-green-soft-2:    #f0fdf4;
    --balanu-green-border:    #a7f3d0;

    /* ═══ NETRAL ═══ */
    --balanu-black:           #0f172a;
    --balanu-gray-dark:       #334155;
    --balanu-gray-medium:     #64748b;
    --balanu-gray-light:      #94a3b8;
    --balanu-border:          #cbd5e1;
    --balanu-border-light:    #e2e8f0;
    --balanu-bg-soft:         #f1f5f9;
    --balanu-bg-alt:          #f8fafc;
    --balanu-white:           #ffffff;

    /* ═══ STATUS ═══ */
    --balanu-warning:         #f59e0b;
    --balanu-warning-bg:      #fef3c7;
    --balanu-warning-text:    #92400e;
    --balanu-danger:          #dc2626;
    --balanu-danger-bg:       #fee2e2;
    --balanu-danger-text:     #991b1b;
    --balanu-info:            #3b82f6;
    --balanu-info-bg:         #dbeafe;
    --balanu-success-bg:      #dcfce7;
    --balanu-success-text:    #166534;

    /* ═══ WHATSAPP ═══ */
    --balanu-wa:              #25D366;
    --balanu-wa-dark:         #1ebc57;

    /* ═══ RADIUS ═══ */
    --balanu-radius-xs:       4px;
    --balanu-radius-sm:       8px;
    --balanu-radius-md:       10px;
    --balanu-radius-lg:       12px;
    --balanu-radius-xl:       14px;
    --balanu-radius-2xl:      16px;
    --balanu-radius-3xl:      20px;
    --balanu-radius-pill:     30px;
    --balanu-radius-full:     9999px;

    /* ═══ SPACING ═══ */
    --balanu-space-1:         4px;
    --balanu-space-2:         8px;
    --balanu-space-3:         10px;
    --balanu-space-4:         14px;
    --balanu-space-5:         16px;
    --balanu-space-6:         20px;
    --balanu-space-7:         24px;
    --balanu-space-8:         40px;
    --balanu-space-9:         50px;

    /* ═══ TYPOGRAPHY ═══ */
    --balanu-font-sans:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --balanu-font-mono:       'SF Mono', Monaco, 'Courier New', monospace;

    --balanu-text-xs:         11px;
    --balanu-text-sm:         13px;
    --balanu-text-base:       14.5px;
    --balanu-text-md:         15px;
    --balanu-text-lg:         16px;
    --balanu-text-xl:         19px;
    --balanu-text-2xl:        24px;
    --balanu-text-3xl:        32px;
    --balanu-text-4xl:        36px;
    --balanu-text-5xl:        42px;

    --balanu-leading-tight:   1.2;
    --balanu-leading-snug:    1.35;
    --balanu-leading-normal:  1.6;
    --balanu-leading-relaxed: 1.7;

    /* ═══ SHADOW ═══ */
    --balanu-shadow-sm:       0 1px 3px rgba(15, 23, 42, 0.05);
    --balanu-shadow-md:       0 4px 12px -4px rgba(15, 23, 42, 0.1);
    --balanu-shadow-lg:       0 12px 22px -10px rgba(5, 150, 105, 0.22);
    --balanu-shadow-xl:       0 25px 50px -12px rgba(15, 23, 42, 0.25);

    /* ═══ TRANSITION ═══ */
    --balanu-transition-fast:    0.15s ease;
    --balanu-transition-normal:  0.18s ease;
    --balanu-transition-smooth:  0.22s ease;

    /* ═══ CONTAINER ═══ */
    --balanu-container-max:      1290px;
    --balanu-container-wide:     1330px;
    --balanu-container-padding:  20px;
}

/* ═══ OVERRIDE GENERATEPRESS CONTAINER WIDTH ═══ */
:root {
    --container-width: var(--balanu-container-max);
}

/* ═══ MOBILE TOKENS ═══ */
@media (max-width: 768px) {
    :root {
        --balanu-container-padding: 16px;
    }
}