/* ============================================================
   variables.css — MyDonor Design Tokens
   Palet warna merah-putih PMI, dipakai konsisten di semua halaman
   ============================================================ */

:root {
    /* -- Warna Primer (PMI Red) -- */
    --color-primary: #D32F2F;
    --color-primary-dark: #B71C1C;
    --color-primary-darker: #8E0000;
    --color-primary-light: #EF5350;
    --color-primary-lighter: #FFCDD2;

    /* -- Warna Aksen (Highlight status penting) -- */
    --color-accent: #FFA726;
    --color-accent-light: #FFE0B2;
    --color-accent-dark: #F57C00;

    /* -- Warna Status -- */
    --color-success: #2E7D32;
    --color-success-light: #C8E6C9;
    --color-warning: #F9A825;
    --color-warning-light: #FFF9C4;
    --color-danger: #C62828;
    --color-danger-light: #FFCDD2;
    --color-info: #1565C0;
    --color-info-light: #BBDEFB;

    /* -- Netral / Background -- */
    --color-bg: #FAFAFA;
    --color-bg-alt: #F5F5F5;
    --color-surface: #FFFFFF;
    --color-border: #E0E0E0;

    /* -- Teks -- */
    --color-text-primary: #212121;
    --color-text-secondary: #757575;
    --color-text-muted: #9E9E9E;
    --color-text-on-primary: #FFFFFF;

    /* -- Radius -- */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 999px;

    /* -- Shadow -- */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-red: 0 6px 16px rgba(211, 47, 47, 0.25);

    /* -- Spacing -- */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* -- Tipografi -- */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 22px;
    --font-size-2xl: 28px;

    /* -- Gradien (untuk kartu Kegiatan Donor di dashboard) -- */
    --gradient-red-bright: linear-gradient(135deg, #EF5350 0%, #D32F2F 100%);
    --gradient-red-deep: linear-gradient(135deg, #D32F2F 0%, #8E0000 100%);

    /* -- Layout -- */
    --max-width-mobile: 480px;
    --bottom-nav-height: 64px;
    --header-height: 64px;
}