/**
 * RAMAAI Brand Design System
 * Version 1.0
 * Based on: ramaai-brand-design/Branding/RAMAAI.pdf
 *
 * All rights reserved - Ramathibodi Hospital, Mahidol University
 */

:root {
    /* ========================================
       PRIMARY COLORS
       ======================================== */
    --ramaai-primary-01: #FAFBFF;  /* Light background */
    --ramaai-primary-02: #62D0C9;  /* Teal (Brand color) */
    --ramaai-primary-03: #000000;  /* Black */
    --ramaai-primary-04: #004F66;  /* Dark teal */

    /* ========================================
       GRAYSCALE COLORS
       ======================================== */
    --ramaai-cloud: #EDEFF7;       /* Lightest gray */
    --ramaai-smoke: #D3D6E0;       /* Light gray */
    --ramaai-steel: #BCBFCC;       /* Medium-light gray */
    --ramaai-space: #9DA2B3;       /* Medium gray */
    --ramaai-graphite: #6E7180;    /* Dark gray */
    --ramaai-arsenic: #40424D;     /* Darker gray */
    --ramaai-phantom: #1E1E24;     /* Almost black */
    --ramaai-black: #000000;       /* Pure black */

    /* ========================================
       TYPOGRAPHY
       ======================================== */
    --ramaai-font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --ramaai-font-weight-extralight: 200;
    --ramaai-font-weight-light: 300;
    --ramaai-font-weight-regular: 400;
    --ramaai-font-weight-medium: 500;
    --ramaai-font-weight-semibold: 600;
    --ramaai-font-weight-bold: 700;
    --ramaai-font-weight-extrabold: 800;

    /* ========================================
       SPACING
       ======================================== */
    --ramaai-spacing-xs: 0.25rem;   /* 4px */
    --ramaai-spacing-sm: 0.5rem;    /* 8px */
    --ramaai-spacing-md: 1rem;      /* 16px */
    --ramaai-spacing-lg: 1.5rem;    /* 24px */
    --ramaai-spacing-xl: 2rem;      /* 32px */
    --ramaai-spacing-2xl: 3rem;     /* 48px */

    /* ========================================
       BORDER RADIUS
       ======================================== */
    --ramaai-radius-sm: 6px;
    --ramaai-radius-md: 8px;
    --ramaai-radius-lg: 12px;

    /* ========================================
       SHADOWS
       ======================================== */
    --ramaai-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --ramaai-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --ramaai-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    /* ========================================
       SEMANTIC COLORS (for alerts, status)
       ======================================== */
    --ramaai-success: #28a745;
    --ramaai-success-bg: #d4edda;
    --ramaai-success-border: #c3e6cb;

    --ramaai-info: #17a2b8;
    --ramaai-info-bg: #d1ecf1;
    --ramaai-info-border: #bee5eb;

    --ramaai-warning: #ffc107;
    --ramaai-warning-bg: #fff3cd;
    --ramaai-warning-border: #ffeeba;

    --ramaai-danger: #dc3545;
    --ramaai-danger-bg: #f8d7da;
    --ramaai-danger-border: #f5c6cb;
}

/* ========================================
   GLOBAL TYPOGRAPHY
   ======================================== */
body {
    font-family: var(--ramaai-font-family);
    font-weight: var(--ramaai-font-weight-regular);
    color: var(--ramaai-phantom);
    background-color: var(--ramaai-primary-01);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ramaai-font-family);
    font-weight: var(--ramaai-font-weight-semibold);
    color: var(--ramaai-primary-04);
}

/* ========================================
   RADZEN THEME OVERRIDES
   ======================================== */

/* Primary color for Radzen components */
.rz-button-primary {
    background-color: var(--ramaai-primary-02) !important;
    border-color: var(--ramaai-primary-02) !important;
}

.rz-button-primary:hover {
    background-color: var(--ramaai-primary-04) !important;
    border-color: var(--ramaai-primary-04) !important;
}

/* RadzenCard styling */
.rz-card {
    border-radius: var(--ramaai-radius-md);
    box-shadow: var(--ramaai-shadow-sm);
}

/* RadzenHeading colors */
.rz-heading-h2 {
    color: var(--ramaai-primary-04);
}

.rz-heading-h3 {
    color: var(--ramaai-primary-03);
}

/* RadzenAlert styling to match brand */
.rz-alert-info {
    background-color: var(--ramaai-info-bg);
    border-color: var(--ramaai-info-border);
    color: #0c5460;
}

.rz-alert-warning {
    background-color: var(--ramaai-warning-bg);
    border-color: var(--ramaai-warning-border);
    color: #856404;
}

.rz-alert-danger {
    background-color: var(--ramaai-danger-bg);
    border-color: var(--ramaai-danger-border);
    color: #721c24;
}

.rz-alert-success {
    background-color: var(--ramaai-success-bg);
    border-color: var(--ramaai-success-border);
    color: #155724;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.ramaai-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--ramaai-spacing-xl);
}

.ramaai-section {
    margin-bottom: var(--ramaai-spacing-2xl);
}

.ramaai-divider {
    border-bottom: 2px solid var(--ramaai-smoke);
    padding-bottom: var(--ramaai-spacing-sm);
    margin-bottom: var(--ramaai-spacing-lg);
}