/* ============================================================
   DonorNearby V3.0 — Theme Tokens
   Semantic design tokens for the emergency coordination platform.
   This file defines ALL CSS custom properties.
   Tailwind handles layout utilities; these tokens handle identity.
   ============================================================ */

/* ─── Light Theme (default) ─── */
:root {
    /* ── Surface Hierarchy ── */
    --bg-body:          #FAF7F7;
    --bg-surface:       #FFFFFF;
    --bg-elevated:      #FFFFFF;
    --bg-sunken:        #F5F2F2;
    --bg-inset:         #EDE9E9;
    --bg-overlay:       rgba(26,26,26,0.45);
    --bg-scrim:         rgba(26,26,26,0.65);

    /* ── Text Hierarchy ── */
    --text-primary:     #1A1A1A;
    --text-secondary:   #4A4A4A;
    --text-tertiary:    #7A7A7A;
    --text-muted:       #A0A0A0;
    --text-disabled:    #C8C8C8;
    --text-inverse:     #FFFFFF;
    --text-on-emergency:#FFFFFF;

    /* ── Emergency / Brand ── */
    --emergency:        #C62828;
    --emergency-hover:  #B71C1C;
    --emergency-active: #A51A1A;
    --emergency-light:  #FFEBEE;
    --emergency-muted:  #EF9A9A;
    --emergency-subtle: #FFF5F5;

    /* ── Semantic Colors ── */
    --success:          #2E7D32;
    --success-hover:    #256B29;
    --success-light:    #E8F5E9;
    --success-muted:    #A5D6A7;
    --warning:          #E8A317;
    --warning-hover:    #D4950F;
    --warning-light:    #FFF8E1;
    --warning-muted:    #FFE082;
    --info:             #1565C0;
    --info-hover:       #0D47A1;
    --info-light:       #E3F2FD;
    --info-muted:       #90CAF9;
    --neutral:          #546E7A;
    --neutral-light:    #ECEFF1;

    /* ── Urgency Scale ── */
    --urgency-critical:     #C62828;
    --urgency-critical-bg:  #FFEBEE;
    --urgency-high:         #E65100;
    --urgency-high-bg:      #FFF3E0;
    --urgency-medium:       #E8A317;
    --urgency-medium-bg:    #FFF8E1;
    --urgency-low:          #2E7D32;
    --urgency-low-bg:       #E8F5E9;
    --urgency-immediate:    #880E0E;
    --urgency-immediate-bg: #F8D7DA;

    /* ── Borders ── */
    --border:           #E0DCDC;
    --border-light:     #EDEBEB;
    --border-strong:    #CCC8C8;
    --border-focus:     #C62828;
    --border-success:   #2E7D32;
    --border-warning:   #E8A317;

    /* ── Shadows ── */
    --shadow-xs:    0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm:    0 1px 3px rgba(0,0,0,0.06);
    --shadow-md:    0 2px 8px rgba(0,0,0,0.08);
    --shadow-lg:    0 4px 16px rgba(0,0,0,0.10);
    --shadow-xl:    0 8px 24px rgba(0,0,0,0.12);
    --shadow-card:  0 1px 3px rgba(0,0,0,0.05);
    --shadow-emergency: 0 2px 12px rgba(198,40,40,0.2);
    --shadow-focus: 0 0 0 3px rgba(198,40,40,0.12);

    /* ── Typography ── */
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-display: 'IBM Plex Sans', 'Inter', -apple-system, sans-serif;
    --font-mono:    'IBM Plex Mono', 'Menlo', 'Consolas', monospace;

    /* ── Type Scale ── */
    --text-2xs:     0.6875rem;  /* 11px */
    --text-xs:      0.75rem;    /* 12px */
    --text-sm:      0.8125rem;  /* 13px */
    --text-base:    0.875rem;   /* 14px */
    --text-md:      1rem;       /* 16px */
    --text-lg:      1.125rem;   /* 18px */
    --text-xl:      1.25rem;    /* 20px */
    --text-2xl:     1.5rem;     /* 24px */
    --text-3xl:     1.875rem;   /* 30px */
    --text-4xl:     2.25rem;    /* 36px */

    /* ── Font Weights ── */
    --weight-normal:    400;
    --weight-medium:    500;
    --weight-semibold:  600;
    --weight-bold:      700;
    --weight-extrabold: 800;

    /* ── Spacing Scale ── */
    --space-0:  0;
    --space-px: 1px;
    --space-0_5: 0.125rem;
    --space-1:  0.25rem;
    --space-1_5: 0.375rem;
    --space-2:  0.5rem;
    --space-2_5: 0.625rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* ── Radius ── */
    --radius-sm:    0.25rem;
    --radius-md:    0.375rem;
    --radius-lg:    0.5rem;
    --radius-xl:    0.75rem;
    --radius-2xl:   1rem;
    --radius-full:  9999px;

    /* ── Transitions ── */
    --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in:       cubic-bezier(0.4, 0, 1, 1);
    --ease-out:      cubic-bezier(0, 0, 0.2, 1);
    --duration-fast:    100ms;
    --duration-normal:  200ms;
    --duration-slow:    300ms;
    --duration-theme:   250ms;
    --transition-fast:   100ms cubic-bezier(0.4,0,0.2,1);
    --transition-normal: 200ms cubic-bezier(0.4,0,0.2,1);
    --transition-slow:   300ms cubic-bezier(0.4,0,0.2,1);
    --transition-theme:  250ms cubic-bezier(0.4,0,0.2,1);

    /* ── Z-Index Scale ── */
    --z-dropdown:   1000;
    --z-sticky:     1020;
    --z-fixed:      1030;
    --z-modal-bg:   1040;
    --z-modal:      1050;
    --z-popover:    1060;
    --z-tooltip:    1070;
    --z-toast:      1080;

    /* ── Sidebar (admin) ── */
    --sidebar-bg:         #FFFFFF;
    --sidebar-border:     #E0DCDC;
    --sidebar-text:       #4A4A4A;
    --sidebar-active:     #C62828;
    --sidebar-active-bg:  #FFEBEE;
    --sidebar-hover:      #FAF7F7;
    --sidebar-width:      14rem;

    /* ── Brand / Action Buttons ── */
    --btn-primary-bg:     #C62828;
    --btn-primary-hover:  #B71C1C;
    --btn-primary-text:   #FFFFFF;
    --btn-secondary-bg:   #F5F2F2;
    --btn-secondary-hover:#EDE9E9;
    --btn-secondary-text: #4A4A4A;
    --btn-success-bg:     #2E7D32;
    --btn-success-hover:  #256B29;
    --btn-success-text:   #FFFFFF;
    --btn-danger-bg:      #E53935;
    --btn-danger-hover:   #C62828;
    --btn-danger-text:    #FFFFFF;

    /* ── Link & Interactive ── */
    --text-link:          #C62828;
    --text-link-hover:    #B71C1C;

    /* ── Card Decorative ── */
    --card-gradient-top:  linear-gradient(135deg, #C62828 0%, #E53935 100%);
    --card-trust-bg:      #FAF7F7;
    --card-trust-border:  #EDE9E9;

    /* ── Form ── */
    --bg-form:            #FFFFFF;
    --input-bg:           #FFFFFF;
    --input-border:       #E0DCDC;
    --input-focus-ring:   rgba(198,40,40,0.12);

    /* ── Layout ── */
    --content-max-width:  72rem;
    --header-height:      3.5rem;
}