/**
 * ============================================================================
 * DRPML Design System – Variables
 * ============================================================================
 * 
 * design system Design Tokens (Prefixed with --drpml-)
 * Base: html { font-size: 62.5%; } (0.625rem = 10px)
 * 
 * Contents:
 * 1. Color Palette (Brand, Gray, Error, Warning, Success)
 * 2. Typography (Fluid scale, weights, letter-spacing)
 * 3. Spacing (Already in drpm-foundation.css)
 * 4. Border Radius (Already in drpm-foundation.css)
 * 5. Shadows (Already in drpm-foundation.css)
 * 6. Transitions & Animations
 * 7. Z-Index Scale
 * 
 * ============================================================================
 */

:root {
	/* ==========================================================================
	   1. COLOR PALETTE – design system
	   ========================================================================== */
	
	/* Brand Colors (Green) */
	--drpml-color-brand-50:  #F5F8F6;
	--drpml-color-brand-100: #DDEAE4;
	--drpml-color-brand-200: #BBD4C9;
	--drpml-color-brand-300: #86AF9F;
	--drpml-color-brand-400: #6A9787;
	--drpml-color-brand-500: #507C6D;
	--drpml-color-brand-600: #3F6257;
	--drpml-color-brand-700: #355048;
	--drpml-color-brand-800: #2D423B;
	--drpml-color-brand-900: #293834;
	--drpml-color-brand-950: #141F1C;
	
	/* Gray Scale */
	--drpml-color-gray-25:  #FDFDFD;
	--drpml-color-gray-50:  #FAFAFA;
	--drpml-color-gray-100: #F5F5F5;
	--drpml-color-gray-200: #E9EAEB;
	--drpml-color-gray-300: #D5D7DA;
	--drpml-color-gray-400: #A4A7AE;
	--drpml-color-gray-500: #717680;
	--drpml-color-gray-600: #535862;
	--drpml-color-gray-700: #414651;
	--drpml-color-gray-800: #252837;
	--drpml-color-gray-900: #181D27;
	--drpml-color-gray-950: #0A0D12;
	
	/* Error/Danger Colors */
	--drpml-color-error-25:  #FFFBFA;
	--drpml-color-error-50:  #FEF3F2;
	--drpml-color-error-100: #FEE4E2;
	--drpml-color-error-200: #FECDCA;
	--drpml-color-error-300: #FDA29B;
	--drpml-color-error-400: #F97066;
	--drpml-color-error-500: #F04438;
	--drpml-color-error-600: #D92D20;
	--drpml-color-error-700: #B42318;
	--drpml-color-error-800: #912018;
	--drpml-color-error-900: #7A271A;
	--drpml-color-error-950: #55160C;
	
	/* Warning Colors */
	--drpml-color-warning-25:  #FFFCF5;
	--drpml-color-warning-50:  #FFFAEB;
	--drpml-color-warning-100: #FEF0C7;
	--drpml-color-warning-200: #FEDF89;
	--drpml-color-warning-300: #FEC84B;
	--drpml-color-warning-400: #FDB022;
	--drpml-color-warning-500: #F79009;
	--drpml-color-warning-600: #DC6803;
	--drpml-color-warning-700: #B54708;
	--drpml-color-warning-800: #93370D;
	--drpml-color-warning-900: #7A2E0E;
	--drpml-color-warning-950: #4E1D09;
	
	/* Success Colors */
	--drpml-color-success-25:  #F6FEF9;
	--drpml-color-success-50:  #ECFDF3;
	--drpml-color-success-100: #DCFAE6;
	--drpml-color-success-200: #ABEFC6;
	--drpml-color-success-300: #75E0A7;
	--drpml-color-success-400: #47CD89;
	--drpml-color-success-500: #17B26A;
	--drpml-color-success-600: #079455;
	--drpml-color-success-700: #067647;
	--drpml-color-success-800: #085D3A;
	--drpml-color-success-900: #074D31;
	--drpml-color-success-950: #053321;
	
	/* Primary Colors (Brand Green - used for accents, focus states, CTAs) */
	--drpml-color-primary-50:  #F5F8F6;
	--drpml-color-primary-100: #DDEAE4;
	--drpml-color-primary-200: #BBD4C9;
	--drpml-color-primary-300: #86AF9F;
	--drpml-color-primary-400: #6A9787;
	--drpml-color-primary-500: #507C6D;
	--drpml-color-primary-600: #3F6257;
	--drpml-color-primary-700: #355048;
	--drpml-color-primary-800: #2D423B;
	--drpml-color-primary-900: #293834;
	--drpml-color-primary-950: #141F1C;
	
	/* Base Colors */
	--drpml-color-white: #FFFFFF;
	--drpml-color-black: #000000;
	--drpml-color-transparent: rgba(255, 255, 255, 0);
	
	
	/* ==========================================================================
	   2. TYPOGRAPHY – design system (Fluid Scale)
	   ========================================================================== */
	
	/* Font Family */
	--drpml-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--drpml-font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Courier New', monospace;
	
	/* Font Weights */
	--drpml-fw-regular: 400;
	--drpml-fw-medium: 500;
	--drpml-fw-semibold: 600;
	--drpml-fw-bold: 700;
	
	/* Letter Spacing */
	--drpml-ls-tight: -0.02em;
	--drpml-ls-normal: 0;
	--drpml-ls-wide: 0.02em;
	
	/* Fluid Font Sizes (360px → 1440px viewport) */
	--drpml-fs-display-2xl: clamp(3rem, 1.875rem + 2.5vw, 4.5rem);
	--drpml-lh-display-2xl: clamp(4rem, 2.5rem + 3vw, 5.625rem);
	
	--drpml-fs-display-xl: clamp(2.25rem, 1.5625rem + 1.8vw, 3.75rem);
	--drpml-lh-display-xl: clamp(3rem, 2rem + 1.8vw, 4.5rem);
	
	--drpml-fs-display-lg: clamp(1.875rem, 1.375rem + 1.5vw, 3rem);
	--drpml-lh-display-lg: clamp(2.375rem, 1.625rem + 1.5vw, 3.75rem);
	
	--drpml-fs-display-md: clamp(1.75rem, 1.25rem + 1.2vw, 2.25rem);
	--drpml-lh-display-md: clamp(2.25rem, 1.5rem + 1.2vw, 2.75rem);
	
	--drpml-fs-display-sm: clamp(1.375rem, 1rem + 1vw, 1.875rem);
	--drpml-lh-display-sm: clamp(2rem, 1.5rem + 1vw, 2.375rem);
	
	--drpml-fs-display-xs: clamp(1.25rem, 0.875rem + .8vw, 1.5rem);
	--drpml-lh-display-xs: clamp(1.75rem, 1.25rem + .8vw, 2rem);
	
	--drpml-fs-text-xl: clamp(1rem, 0.75rem + .5vw, 1.25rem);
	--drpml-lh-text-xl: clamp(1.5rem, 1.25rem + .5vw, 1.875rem);
	
	--drpml-fs-text-lg: clamp(0.875rem, 0.6875rem + .4vw, 1.125rem);
	--drpml-lh-text-lg: clamp(1.25rem, 1rem + .4vw, 1.75rem);
	
	--drpml-fs-text-md: clamp(0.875rem, 0.75rem + .2vw, 1rem);
	--drpml-lh-text-md: 1.5rem;
	
	--drpml-fs-text-sm: clamp(0.75rem, 0.6875rem + .1vw, 0.875rem);
	--drpml-lh-text-sm: 1.25rem;
	
	--drpml-fs-text-xs: clamp(0.6875rem, 0.625rem + .1vw, 0.75rem);
	--drpml-lh-text-xs: 1.125rem;
	
	
	/* ==========================================================================
	   3. TRANSITIONS & ANIMATIONS
	   ========================================================================== */
	
	/* Durations */
	--drpml-duration-instant: 0.1s;
	--drpml-duration-fast: 0.15s;
	--drpml-duration-normal: 0.2s;
	--drpml-duration-medium: 0.3s;
	--drpml-duration-slow: 0.4s;
	
	/* Easing Functions */
	--drpml-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--drpml-ease-in: cubic-bezier(0.4, 0, 1, 1);
	--drpml-ease-out: cubic-bezier(0, 0, 0.2, 1);
	--drpml-ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
	
	
	/* ==========================================================================
	   4. Z-INDEX SCALE
	   ========================================================================== */
	
	--drpml-z-base: 0;
	--drpml-z-dropdown: 1000;
	--drpml-z-sticky: 1020;
	--drpml-z-fixed: 1030;
	--drpml-z-modal-backdrop: 1040;
	--drpml-z-modal: 1050;
	--drpml-z-popover: 1060;
	--drpml-z-tooltip: 1070;
	--drpml-z-toast: 9999;

	/* ==========================================================================
	   5. LAYOUT DIMENSIONS
	   ========================================================================== */
	
	--drpml-header-height: 88px;
}

/* ==========================================================================
   BASE HTML & BODY STYLES
   ========================================================================== */
html {
	font-size: 62.5%; /* 0.625rem = 10px */
}

body {
	font-family: var(--drpml-font-family);
	font-weight: var(--drpml-fw-regular);
	font-size: var(--drpml-fs-text-md);
	line-height: var(--drpml-lh-text-md);
	letter-spacing: var(--drpml-ls-normal);
	color: var(--drpml-color-gray-900);
	background: var(--drpml-color-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   HEADING DEFAULTS
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
	font-weight: var(--drpml-fw-semibold);
	line-height: var(--drpml-lh-display-xs);
	letter-spacing: var(--drpml-ls-tight);
	color: var(--drpml-color-gray-900);
	margin: 0;
}

h1 { font-size: var(--drpml-fs-display-md); }
h2 { font-size: var(--drpml-fs-display-sm); }
h3 { font-size: var(--drpml-fs-display-xs); }
h4 { font-size: var(--drpml-fs-text-xl); }
h5 { font-size: var(--drpml-fs-text-lg); }
h6 { font-size: var(--drpml-fs-text-md); }