/* ========================================
   DERMAHUYS Design System
   CSS Custom Properties (Variables)
   ======================================== */

:root {
    /* ==================== Brand Colors ==================== */
    --color-primary: #d4a574;
    --color-primary-dark: #c89660;
    --color-primary-light: #e5c9a3;
    --gradient-primary: linear-gradient(135deg, #d4a574 0%, #c89660 100%);
    
    /* ==================== Neutral Colors ==================== */
    --color-background: #f5f0eb;
    --color-surface: #ffffff;
    --color-surface-alt: #fafafa;
    --color-surface-hover: #f9f9f9;
    
    /* ==================== Text Colors ==================== */
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #666666;
    --color-text-tertiary: #999999;
    --color-text-disabled: #cccccc;
    --color-text-inverse: #ffffff;
    
    /* ==================== Border Colors ==================== */
    --color-border: #e5e5e5;
    --color-border-light: #f0f0f0;
    --color-border-dark: #d0d0d0;
    
    /* ==================== Status Colors ==================== */
    /* Success (Green) */
    --color-success: #16a34a;
    --color-success-bg: #dcfce7;
    --color-success-border: #86efac;
    
    /* Error (Red) */
    --color-error: #dc2626;
    --color-error-bg: #fee2e2;
    --color-error-border: #fecaca;
    
    /* Warning (Yellow/Orange) */
    --color-warning: #92400e;
    --color-warning-bg: #fef3c7;
    --color-warning-border: #fde68a;
    
    /* Info (Blue) */
    --color-info: #0369a1;
    --color-info-bg: #f0f9ff;
    --color-info-border: #0ea5e9;
    
    /* ==================== Interactive States ==================== */
    --color-hover: #ede8e3;
    --color-active: #f5f0eb;
    --color-focus: rgba(212, 165, 116, 0.1);
    --color-disabled: #f5f5f5;
    
    /* ==================== Border Radius ==================== */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    /* ==================== Spacing Scale ==================== */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-7: 28px;
    --spacing-8: 32px;
    --spacing-10: 40px;
    --spacing-12: 48px;
    
    /* ==================== Typography ==================== */
    /* Font Families */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif: 'Cormorant Garamond', serif;
    --font-mono: 'Courier New', monospace;
    --heading-font-weight: var(--font-light);
    --heading-letter-spacing: var(--tracking-tight);
    --heading-font-stretch: 85%;
    --heading-font-variation-weight: 280;
    --body-font-weight: var(--font-normal);
    
    /* Font Sizes */
    --text-2xs: 11px;
    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-lg: 15px;
    --text-xl: 16px;
    --text-2xl: 14px;
    --text-3xl: 20px;
    --text-4xl: 24px;
    --text-5xl: 32px;
    --text-6xl: 36px;
    --text-7xl: 40px;
    --text-8xl: 56px;
    
    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    /* Line Heights */
    --leading-tight: 1.2;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;
    --leading-loose: 1.8;
    
    /* Letter Spacing */
    --tracking-tight: -0.5px;
    --tracking-normal: 0;
    --tracking-wide: 0.5px;
    --tracking-wider: 0.8px;
    --tracking-widest: 2px;
    
    /* ==================== Shadows ==================== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 12px 30px rgba(0, 0, 0, 0.15);
    --shadow-primary: 0 4px 12px rgba(212, 165, 116, 0.2);
    --shadow-primary-lg: 0 8px 25px rgba(212, 165, 116, 0.3);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    
    /* ==================== Transitions ==================== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-cubic: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ==================== Z-Index Scale ==================== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* ==================== Sizes ==================== */
    --sidebar-width: 260px;
    --header-height: 72px;
    --button-height: 40px;
    --input-height: 44px;
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;
    --avatar-sm: 32px;
    --avatar-md: 40px;
    --avatar-lg: 48px;
}

/* ==================== Utility Classes ==================== */

/* Text Colors */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-brand { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-info); }

/* Background Colors */
.bg-surface { background-color: var(--color-surface); }
.bg-surface-alt { background-color: var(--color-surface-alt); }
.bg-primary { background: var(--gradient-primary); }
.bg-success { background-color: var(--color-success-bg); }
.bg-error { background-color: var(--color-error-bg); }
.bg-warning { background-color: var(--color-warning-bg); }
.bg-info { background-color: var(--color-info-bg); }

/* Font Families */
.font-sans { font-family: var(--font-sans); }
.font-serif { font-family: var(--font-serif); }
.font-mono { font-family: var(--font-mono); }

/* Border Radius */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-primary { box-shadow: var(--shadow-primary); }