/* Design System Theme Variables */
/* This file contains all design tokens that can later be converted to theme.json */

:root {
    /* Colors */
    --color-primary: #e95521;
    --color-primary-rgb: 233, 85, 33;
    --color-secondary: #333333;
    --color-secondary-rgb: 51, 51, 51;
    --color-background: #ebebeb;
    --color-background-dark: #e95521;
    --color-text: #111111;
    --color-text-light: #ffffff;
    --color-text-muted: #a6a6a6;
    --color-border: #ebebeb;
    
    /* Typography */
    --font-family-heading: 'Recursive', sans-serif;
    --font-family-body: 'IBM Plex Sans', sans-serif;
    --font-variation-settings: 'CASL' 0, 'CRSV' 0.5, 'MONO' 0;
    
    /* Font Sizes - Desktop */
    --font-size-h1: 90px;
    --line-height-h1: 96px;
    --font-size-h2: 64px;
    --line-height-h2: 70px;
    --font-size-h3: 46px;
    --line-height-h3: 52px;
    --font-size-h4: 28px;
    --line-height-h4: 33px;
    --font-size-h5: 22px;
    --line-height-h5: 32px;
    --font-size-h6: 18px;
    --line-height-h6: 24px;
    --font-size-body: 18px;
    --line-height-body: 28px;
    --font-size-small: 16px;
    --line-height-small: 24px;
    --font-size-button: 16px;
    --line-height-button: 24px;
    
    /* Font Sizes - Tablet (1200px) */
    --font-size-h1-tablet: 64px;
    --line-height-h1-tablet: 70px;
    --font-size-h2-tablet: 48px;
    --line-height-h2-tablet: 52px;
    
    /* Font Sizes - Mobile (768px) */
    --font-size-h1-mobile: 48px;
    --line-height-h1-mobile: 52px;
    --font-size-h2-mobile: 48px;
    --line-height-h2-mobile: 52px;
    --font-size-h3-mobile: 36px;
    --line-height-h3-mobile: 42px;
    --font-size-h4-mobile: 24px;
    --line-height-h4-mobile: 28px;
    --font-size-h5-mobile: 18px;
    --line-height-h5-mobile: 24px;
    --font-size-body-mobile: 16px;
    --line-height-body-mobile: 24px;
    
    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    
    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 14px;
    --spacing-md: 20px;
    --spacing-lg: 24px;
    --spacing-xl: 40px;
    --spacing-2xl: 60px;
    --spacing-3xl: 80px;
    --spacing-4xl: 100px;
    --spacing-5xl: 150px;
    
    /* Section Padding */
    --section-padding: 100px 0;
    --section-padding-mobile: 50px 0;
    
    /* Container */
    --container-max-width: 1440px;
    --container-padding: 0 96px;
    --container-padding-mobile: 0 20px;
    --container-padding-tablet: 0 25px;
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-full: 1000px;
    --radius-button: 1000px;
    --radius-card: 20px;
    --radius-card-mobile: 12px;
    
    /* Shadows */
    --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.2);
    --shadow-md: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
    --shadow-lg: 0 4px 12px rgba(var(--color-primary-rgb), 0.4);
    
    /* Transitions */
    --transition-fast: 0.3s ease;
    --transition-base: all 0.3s ease;
    
    /* Z-index */
    --z-index-base: 1;
    --z-index-dropdown: 10;
    --z-index-sticky: 100;
    --z-index-overlay: 1000;
    
    /* Breakpoints */
    --breakpoint-tablet: 1200px;
    --breakpoint-mobile: 768px;
    
    /* Button */
    --button-height: 48px;
    --button-padding: 10px 20px;
    --button-before-size: 48px;
    --button-before-offset: -16px;
    --button-before-radius: 24px;
    
    /* Gradients */
    --gradient-primary: linear-gradient(to right, rgba(255, 255, 255, 0.65), #ffffff);
    --gradient-secondary: linear-gradient(to right, rgba(var(--color-primary-rgb), 0.65), var(--color-primary));
    --gradient-primary-hover: linear-gradient(to right, #ffffff, #ffffff);
    --gradient-secondary-hover: linear-gradient(to right, var(--color-primary), var(--color-primary));
    --gradient-primary-before: rgba(255, 255, 255, 0.2);
    --gradient-secondary-before: rgba(var(--color-primary-rgb), 0.2);
    --gradient-primary-before-hover: rgba(255, 255, 255, 1);
    --gradient-secondary-before-hover: rgba(var(--color-primary-rgb), 1);
}