/* =========================================
   MEDCILIA DESIGN SYSTEM
   Generated from Figma: Medcilia Hospital UI Design System
   ========================================== */

/**
 * COLOR FOUNDATION
 * Based on design tokens extracted from Figma
 */

:root {
    /* BRAND COLORS (From Swatch collection) */
    --brand-600: #1a3d5e;              /* Primary brand color */
    --brand-subtle: rgba(26, 61, 94, 0.15);   /* Subtle variant */
    
    /*** INK LAYER (Typography)**/
    --ink-primary: #1a1a1a;            /* Main text */
    --ink-secondary: #4a4a4a;          /* Secondary text */
    --ink-muted: #8a8a8a;              /* Muted/descriptive */
    
    /*** CANVAS LAYER (Backgrounds)****/
    --canvas-neutral: #ffffff;          /* Primary background */
    --canvas-soft: #fafafa;           /* Soft section backgrounds */
    
    /*** STATUS COLORS (from 700 scale)**/
    --success-700: #136f4e;            /* Success states */
    --warning-700: #d97706;            /* Warning/alerts */
    --critical-700: #dc2626;           /* Error/critical */
    --info-700: #2563eb;               /* Info/prompts */
    
    /*** NEUTRAL SCALE****/
    --gray-50: #fafafa;
    --gray-100: #f4f4f4;
    --gray-200: #e4e4e7;
    --gray-300: #d4d4d8;
    --gray-400: #a1a1aa;
    --gray-500: #71717a;
    --gray-600: #52525b;
    --gray-700: #3f3f46;
    --gray-800: #27272a;
    --gray-900: #18181b;
    
    /*** BORDER COLORS**/
    --border-default: var(--gray-200);
    --border-strong: var(--gray-300);
    --border-system: rgba(0, 0, 0, 0.05);
}

/**
 * TYPOGRAPHY SYSTEM
 * "Clinical clarity over decoration"
 * As per Figma Design System guidelines
 */

:root {
    /* Font Family - Clean sans-serif for clinical readability */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 
                   'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    
    /* Body text uses 14px baseline - comfortable for reading long content */
    --fs-12: 0.75rem;              /* Compact data labels */
    --fs-13: 0.8125rem;           /* Extra small */
    --fs-14: 0.875rem;            /* Body text baseline (14px) */
    --fs-16: 1rem;                /* Base size */
    --fs-18: 1.125rem;            /* Large body */
    --fs-20: 1.25rem;             /* Section headings */
    --fs-24: 1.5rem;              /* Hero/small hero */
    --fs-32: 2rem;                /* Large hero */
    --fs-48: 3rem;                /* Masthead */
    
    /* LINE HEIGHTS - Generous spacing for readability as specified */
    --lh-tight: 1.25;             /* Headings */
    --lh-base: 1.5;               /* Body baseline (generous line spacing)*/
    --lh-relaxed: 1.625;          /* Longer content blocks */
    
    /* Letter Spacing */
    --ls-tight: -0.02em;
    --ls-normal: 0em;
    --ls-wide: 0.03em;
}

/**
 * BASE STYLES
 */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family);
    font-size: var(--fs-14);
    line-height: var(--lh-base);
    color: var(--ink-primary);
    background-color: var(--canvas-neutral);
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/**
 * UTILITIES
 */
.text-xs { font-size: var(--fs-12); line-height: calc(1.5 * 0.75rem); }
.text-sm { font-size: var(--fs-13); line-height: calc(1.5 * 0.8125rem); }
.text-base { font-size: var(--fs-14); line-height: var(--lh-base); }
.text-lg { font-size: var(--fs-18); line-height: var(--lh-relaxed); }
.text-xl { font-size: var(--fs-20); line-length: var(--lh-relaxed); }
.text-2xl { font-size: var(--fs-24); line-height: var(--lh-relaxed); }
.text-3xl { font-size: var(--fs-32); line-height: var(--lh-tight); }
.text-48 { font-size: 48px; line-height: var(--lh-tight); }

.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-muted { color: var(--ink-muted); }
.text-secondary { color: var(--ink-secondary); }
.text-strong { color: var(--ink-primary); }
.text-success { color: var(--success-700); }
.text-warning { color: var(--warning-700); }
.text-critical { color: var(--critical-700); }
.text-info { color: var(--info-700); }

.text-left { text-align: left; }
.text-center { text-align: center; }

.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }
.lowercase { text-transform: lowercase; }

.text-wrap { white-space: normal; overflow: visible; }
.text-nowrap { white-space: nowrap; overflow: hidden; }

.compact-label {
    font-size: var(--fs-12);
    text-transform: lowercase;
    line-height: calc(1.5 * 0.75rem);
    color: var(--ink-muted);
}

.lead-text {
    font-size: var(--fs-18);
    line-height: var(--lh-relaxed);
    color: var(--ink-secondary);
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.container-lg {
    max-width: 1400px;
}

.container-xl {
    max-width: 1600px;
}

/**
 * BUTTON COMPONENTS
 * Based on Button showcase from Figma Design System
 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family);
    font-size: var(--fs-14);
    font-weight: 500;
    line-height: calc(1.5 * 1rem);
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.15s ease;
    cursor: pointer;
    border: none;
    padding: 8px 16px;
    letter-spacing: -0.02em;
}

.btn-primary {
    background-color: var(--brand-600);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    opacity: 0.9;
}

.btn-secondary {
    background-color: transparent;
    color: var(--ink-primary);
    border: 1px solid var(--border-default);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--brand-subtle);
    border-color: var(--brand-600);
}

.btn-sm {
    padding: 4px 10px;
    font-size: var(--fs-13);
}

.btn-lg {
    padding: 12px 24px;
    font-size: var(--fs-16);
}

/** 
 * BADGES / STATUS INDICATORS
 * From Badge showcase - Success/Warning/Critical/Info colors
 */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family);
    font-size: var(--fs-12);
    font-weight: 500;
    text-transform: uppercase;
    line-height: calc(1.5 * 0.75rem);
    white-space: nowrap;
    border-radius: 4px;
    padding: 6px 12px;
}

.badge-success {
    background-color: var(--success-700);
    color: white;
}

.badge-warning {
    background-color: var(--warning-700);
    color: white;
}

.badge-critical {
    background-color: var(--critical-700);
    color: white;
}

.badge-info {
    background-color: var(--info-700);
    color: white;
}

/**
 * METRIC CARDS
 * From Card/Metric showcase in Figma
 */

.card-metric {
    padding: 24px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card-metric .metric-value {
    font-size: clamp(3rem, 6vw, 4rem);
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.card-metric-primary {
    background-color: var(--canvas-neutral);
    border: 1px solid var(--border-default);
}

.card-metric-secondary {
    background-color: var(--brand-subtle);
    border: 1px solid var(--border-strong);
    border-top-color: var(--brand-600);
}

/**
 * SECTION TYPOGRAPHY
 */
.section-heading-lg {
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: var(--lh-tight);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.section-heading-md {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    line-height: var(--lh-tight);
    font-weight: 600;
}

.section-lead {
    font-size: var(--fs-18);
    line-height: var(--lh-relaxed);
    color: var(--ink-secondary);
    max-width: 70ch;
}

/**
 * LINKS
 */
.link {
    color: inherit;
}

.link-primary {
    color: var(--brand-600);
    font-weight: 500;
}

.link-primary:hover {
    text-decoration: underline;
}

/**
 * DIVIDER/LINE SEPARATORS
 */
hr {
    border: none;
    height: 1px;
    background-color: var(--border-default);
    margin: 32px 0;
}

/**
 * GRID SYSTEM (RESPONSIVE)
 */
.grid {
    display: grid;
    gap: 2rem;
    width: 100%;
}

.grid-1col { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-2cols { grid-template-columns: repeat(2, 1fr); }
.grid-3cols { grid-template-columns: repeat(3, 1fr); }
.grid-4cols { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
    .grid-3cols, 
    .grid-4cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .grid-2cols,
    .grid-3cols,
    .grid-4cols {
        grid-template-columns: repeat(1, 1fr);
    }
    .container,
    .container-lg,
    .container-xl {
        padding: 0 1rem;
    }
}