@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

/* Design Tokens - CSS Custom Properties */

:root {
    /* ===== COLOR PALETTE ===== */
    
    /* Primary Burgundy */
    --color-primary-100: #7B1527;
    --color-primary-80: #9B2537;
    --color-primary-60: #B84D5C;
    --color-primary-40: #D4858F;
    --color-primary-20: #F2D4D0;
    --color-primary-10: #FAF5F0;
    
    /* Secondary Rose/Cream */
    --color-secondary-100: #E8AFA8;
    --color-secondary-80: #EFC0BB;
    --color-secondary-60: #F3D2CE;
    --color-secondary-40: #F7E0DD;
    --color-secondary-20: #FAF0EE;
    
    /* Semantic Colors - Success */
    --color-success-100: #28A745;
    --color-success-20: #D4EDDA;
    
    /* Semantic Colors - Warning */
    --color-warning-100: #FFA500;
    --color-warning-20: #FFF3CD;
    
    /* Semantic Colors - Error */
    --color-error-100: #DC3545;
    --color-error-20: #F8D7DA;
    
    /* Semantic Colors - Info */
    --color-info-100: #17A2B8;
    --color-info-20: #D1ECF1;
    
    /* Neutral Grays */
    --color-gray-100: #212529;
    --color-gray-80: #495057;
    --color-gray-60: #6C757D;
    --color-gray-40: #ADB5BD;
    --color-gray-20: #DEE2E6;
    --color-gray-10: #F8F9FA;
    --color-white: #FFFFFF;
    
    /* ===== TYPOGRAPHY ===== */
    
    /* Font Families */
    --font-primary: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-heading: "DM Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Font Sizes */
    --font-size-h1: 2.25rem;      /* 36px */
    --font-size-h1-mobile: 1.75rem; /* 28px */
    --font-size-h2: 1.75rem;      /* 28px */
    --font-size-h2-mobile: 1.5rem; /* 24px */
    --font-size-h3: 1.5rem;       /* 24px */
    --font-size-h3-mobile: 1.25rem; /* 20px */
    --font-size-h4: 1.25rem;      /* 20px */
    --font-size-body-large: 1.125rem; /* 18px */
    --font-size-body: 1rem;       /* 16px */
    --font-size-body-small: 0.875rem; /* 14px */
    --font-size-caption: 0.75rem; /* 12px */
    
    /* Line Heights */
    --line-height-h1: 1.22;
    --line-height-h2: 1.29;
    --line-height-h3: 1.33;
    --line-height-h4: 1.4;
    --line-height-body-large: 1.56;
    --line-height-body: 1.5;
    --line-height-body-small: 1.43;
    --line-height-caption: 1.33;
    
    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Letter Spacing */
    --letter-spacing-h1: -0.5px;
    --letter-spacing-h2: -0.3px;
    
    /* ===== SPACING SCALE ===== */
    /* Base unit: 8px */
    --space-0: 0;
    --space-1: 0.25rem;  /* 4px */
    --space-2: 0.5rem;   /* 8px */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.5rem;   /* 24px */
    --space-6: 2rem;     /* 32px */
    --space-7: 2.5rem;   /* 40px */
    --space-8: 3rem;     /* 48px */
    --space-9: 4rem;     /* 64px */
    --space-10: 5rem;    /* 80px */
    
    /* ===== COMPONENT-SPECIFIC SPACING ===== */
    
    /* Form Fields */
    --form-field-gap: 1.25rem;     /* 20px */
    --form-label-gap: var(--space-2); /* 8px */
    --form-input-padding-y: 0.75rem; /* 12px */
    --form-input-padding-x: 1rem;    /* 16px */
    
    /* Buttons */
    --button-padding-y: 0.75rem;  /* 12px */
    --button-padding-x: 1.5rem;   /* 24px */
    --button-gap: var(--space-2); /* 8px */
    --button-group-gap: var(--space-3); /* 12px */
    
    /* Cards */
    --card-padding: var(--space-5);     /* 24px */
    --card-padding-mobile: var(--space-4); /* 16px */
    
    /* Sections */
    --section-gap: var(--space-8);        /* 48px */
    --section-gap-mobile: var(--space-6); /* 32px */
    
    /* Page Margins */
    --page-margin-x-desktop: var(--space-10); /* 80px */
    --page-margin-x-tablet: var(--space-7);   /* 40px */
    --page-margin-x-mobile: 1.25rem;          /* 20px */
    --page-margin-y-desktop: var(--space-8);  /* 48px */
    --page-margin-y-tablet: var(--space-6);   /* 32px */
    --page-margin-y-mobile: var(--space-5);   /* 24px */
    
    /* ===== BORDER RADIUS ===== */
    --radius-small: 4px;
    --radius-medium: 6px;
    --radius-large: 8px;
    --radius-full: 50%;
    
    /* ===== SHADOWS ===== */
    --shadow-small: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-large: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-button-hover: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-focus: 0 0 0 3px var(--color-primary-20);
    
    /* ===== TRANSITIONS ===== */
    --transition-fast: 150ms ease-in-out;
    --transition-medium: 250ms ease-in-out;
    --transition-slow: 400ms ease-in-out;
    
    /* ===== BREAKPOINTS ===== */
    /* These are used in media queries, not as variables */
    /* Mobile: 320px - 767px */
    /* Tablet: 768px - 991px */
    /* Desktop: 992px+ */
    
    /* ===== Z-INDEX SCALE ===== */
    --z-index-base: 1;
    --z-index-dropdown: 100;
    --z-index-sticky: 200;
    --z-index-modal-overlay: 900;
    --z-index-modal: 1000;
    --z-index-toast: 1100;
    
    /* ===== ACCESSIBILITY ===== */
    --focus-outline-width: 2px;
    --focus-outline-offset: 3px;
    --min-touch-target: 44px;
}