/* ============================================
   ADINATH HOSPITAL - DESIGN SYSTEM
   Single source of truth for design tokens
   ============================================ */

/* ============================================
   EXTENDED CSS VARIABLES
   (Base variables are in styles.css :root)
   ============================================ */
:root {
    /* Spacing Scale (4px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* Z-Index Scale */
    --z-dropdown: 100;
    --z-toast: 800;

    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;

    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Alert Colors */
    --alert-success-bg: #d1fae5;
    --alert-success-text: #065f46;
    --alert-success-border: #a8d8bc;
    --alert-warning-bg: #fef3c7;
    --alert-warning-text: #92400e;
    --alert-warning-border: #fde68a;
    --alert-error-bg: #fee2e2;
    --alert-error-text: #991b1b;
    --alert-error-border: #fecaca;
    --alert-info-bg: #dbeafe;
    --alert-info-text: #1e40af;
    --alert-info-border: #bfdbfe;

    /* Status Colors */
    --status-danger: #dc2626;
    --status-warning: #c4704b;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.hidden {
    display: none;
}

/* ============================================
   COMPONENT CLASSES - CARDS
   ============================================ */

.card {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.card-header {
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--gray-200);
    font-weight: var(--font-semibold);
}

.card-body {
    padding: var(--space-6);
}

/* ============================================
   COMPONENT CLASSES - BADGES
   ============================================ */

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    border-radius: var(--radius-full);
}

/* ============================================
   COMPONENT CLASSES - TRUST SECTION
   ============================================ */

.trust-item {
    text-align: center;
}

.trust-icon {
    font-size: 3rem;
}

/* ============================================
   COMPONENT CLASSES - USER INFO DISPLAY
   ============================================ */

.user-info {
    padding: var(--space-3) var(--space-4);
    background: #f0fdf4;
    border-bottom: 1px solid var(--gray-200);
}

.user-info-name {
    font-weight: var(--font-semibold);
    color: var(--gray-800);
}

.user-info-role {
    font-size: var(--text-xs);
    color: var(--gray-500);
    text-transform: capitalize;
}

/* ============================================
   COMPONENT CLASSES - STAT CARDS
   ============================================ */

.stat-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow);
}