@charset "UTF-8";
/**
 * AIny Member Design Tokens
 * Single source of truth — semua nilai design ada di sini.
 * Direferensikan oleh: auth.css, dashboard.css, checkout.css, admin.css
 */

:root {
    /* === COLORS — Brand === */
    --ainy-primary:        #294d8c;
    --ainy-primary-hover:  #1e3a6e;
    --ainy-primary-dark:   #1f3d70;
    --ainy-primary-light:  #3a5fa3;
    --ainy-primary-tint:   #eef2f9;
    --ainy-primary-soft:   #dde5f1;

    --ainy-accent:         #ff1100;
    --ainy-accent-hover:   #d40e00;
    --ainy-accent-dark:    #cc0d00;
    --ainy-accent-light:   #fef2f2;

    /* === COLORS — Neutral === */
    --ainy-bg:             #f9fafb;
    --ainy-surface:        #ffffff;
    --ainy-white:          #ffffff;
    --ainy-surface-2:      #f3f4f6;
    --ainy-border:         #e5e7eb;
    --ainy-border-soft:    #f3f4f6;
    --ainy-border-strong:  #d1d5db;

    /* === COLORS — Text === */
    --ainy-text:           #111827;
    --ainy-text-muted:     #6b7280;
    --ainy-text-soft:      #9ca3af;
    --ainy-text-disabled:  #9ca3af;
    --ainy-text-on-primary: #ffffff;

    /* === COLORS — Status === */
    --ainy-success:        #16a34a;
    --ainy-success-bg:     #f0fdf4;
    --ainy-warning:        #f59e0b;
    --ainy-warning-dark:   #d97706;
    --ainy-warning-bg:     #fffbeb;
    --ainy-danger:         #dc2626;
    --ainy-danger-bg:      #fef2f2;
    --ainy-info:           #0ea5e9;
    --ainy-info-bg:        #f0f9ff;

    /* === SPACING (4px grid) === */
    --ainy-sp-1:  4px;
    --ainy-sp-2:  8px;
    --ainy-sp-3:  12px;
    --ainy-sp-4:  16px;
    --ainy-sp-5:  20px;
    --ainy-sp-6:  24px;
    --ainy-sp-8:  32px;
    --ainy-sp-10: 40px;
    --ainy-sp-12: 48px;

    /* === RADIUS === */
    --ainy-radius-sm:   6px;
    --ainy-radius:      10px;
    --ainy-radius-md:   10px;
    --ainy-radius-lg:   14px;
    --ainy-radius-pill: 999px;
    --ainy-radius-full: 999px;

    /* === SHADOWS === */
    --ainy-shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.05);
    --ainy-shadow:       0 4px 12px rgba(0, 0, 0, 0.08);
    --ainy-shadow-md:    0 4px 12px rgba(0, 0, 0, 0.08);
    --ainy-shadow-lg:    0 12px 32px rgba(0, 0, 0, 0.12);
    --ainy-shadow-focus: 0 0 0 3px rgba(41, 77, 140, 0.18);

    /* === TYPOGRAPHY === */
    --ainy-font:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ainy-font-family:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ainy-font-size-xs:   0.75rem;   /* 12px */
    --ainy-font-size-sm:   0.875rem;  /* 14px */
    --ainy-font-size-base: 1rem;      /* 16px */
    --ainy-font-size-lg:   1.125rem;  /* 18px */
    --ainy-font-size-xl:   1.25rem;   /* 20px */
    --ainy-font-size-2xl:  1.5rem;    /* 24px */
    --ainy-font-size-3xl:  1.875rem;  /* 30px */

    /* === TRANSITIONS === */
    --ainy-transition:    0.18s ease;
    --ainy-transition-fast: 0.12s ease;

    /* === Z-INDEX === */
    --ainy-z-dropdown: 100;
    --ainy-z-modal:    1000;
    --ainy-z-toast:    1100;
}

/* Mobile breakpoint adjustments */
@media (max-width: 480px) {
    :root {
        --ainy-sp-8:  24px;
        --ainy-sp-10: 32px;
        --ainy-sp-12: 40px;
    }
}