/* ============================================================================
   BASE.CSS
   Variabel CSS, color system 5-tier, typography, dan reset dasar.
   ============================================================================ */

:root {
    /* ── 5-TIER COLOR SYSTEM ─────────────────────────────────────────── */
    --primary:    #0B2545;   /* Main brand: header, footer, button main, sidebar accent */
    --secondary:  #1591DC;   /* Secondary: link hover, focus ring, secondary actions */
    --accent:     #4BB8FA;   /* Accent: highlights, badges, special elements */
    --neutral:    #C4E2F5;   /* Neutral: subtle bg, hover state, soft divider */
    --text:       #18181b;   /* Main text color */

    /* Variants untuk shading */
    --primary-dark:    #061830;
    --primary-darker:  #030d1c;
    --primary-light:   #1a3a66;
    --neutral-light:   #f0f7fc;

    /* Alias untuk backward compatibility (Tailwind toko-* class tetap jalan) */
    --toko-50:  #f0f7fc;
    --toko-100: #C4E2F5;
    --toko-200: #a8d5f0;
    --toko-300: #4BB8FA;
    --toko-400: #2eaaef;
    --toko-500: #1591DC;
    --toko-600: #0B2545;   /* primary baru */
    --toko-700: #061830;   /* primary-dark */

    /* Status colors */
    --color-success: #16a34a;
    --color-warning: #d97706;
    --color-danger:  #dc2626;
    --color-info:    #2563eb;

    /* WhatsApp brand (tetap hijau) */
    --color-wa:       #25D366;
    --color-wa-hover: #1EBE5C;

    /* Neutral grays */
    --gray-50:  #fafafa;
    --gray-100: #f4f4f5;
    --gray-200: #e4e4e7;
    --gray-300: #d4d4d8;
    --gray-400: #a1a1aa;
    --gray-500: #71717a;
    --gray-600: #52525b;
    --gray-700: #3f3f46;
    --gray-800: #27272a;
    --gray-900: #18181b;

    /* Typography */
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

body {
    font-family: var(--font-sans);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}