/* Design Tokens - Updated Brand Colors */
:root {
    /* New Color System */
    --color-primary: #0E3C48;
    --color-secondary: #1F7740;
    --color-accent: #D88617;
    --bg-page: #F5F1E9;
    --bg-surface: #FFFFFF;
    --bg-muted: #F2F4F5;
    --text-primary: #101010;
    --text-muted: #3F4A50;
    --border: #CBD1D4;
    --rating: #FFB829;
    --error: #C2372E;
    
    /* Typography */
    --font-family-roboto: 'Roboto', sans-serif;
    --font-family-inter: 'Inter', sans-serif;
    
    /* Semantic Typography Scale */
    --font-size-h1: 36px;          /* Product titles, main hero */
    --font-size-h2: 32px;          /* Section titles */
    --font-size-h3: 24px;          /* Subheadings, card titles */
    --font-size-h4: 19px;          /* Accordion headers, smaller headings */
    --font-size-body-large: 18px;  /* Prominent body text */
    --font-size-body: 16px;        /* Default body text */
    --font-size-body-small: 14px;  /* Secondary text, labels */
    --font-size-caption: 13px;     /* Fine print, metadata */
    --font-size-tiny: 12px;        /* Cart badges, smallest text */
    --font-size-display: 48px;     /* Large display text (ratings, etc.) */
    
    /* Legacy Numeric Variables (for backward compatibility) */
    --font-size-13: 13px;
    --font-size-14: 14px;
    --font-size-15: 15px;
    --font-size-16: 16px;
    --font-size-17: 17px;
    --font-size-18: 18px;
    --font-size-19: 19px;
    --font-size-24: 24px;
    --font-size-26: 26px;
    --font-size-29: 29px;
    --font-size-30: 30px;
    --font-size-36: 36px;
    --font-size-40: 40px;
    --font-size-41: 41px;
    --font-size-47: 47px;
    --font-weight-400: 400;
    --font-weight-500: 500;
    --font-weight-700: 700;
    --line-height-17: 17px;
    --line-height-19: 19px;
    --line-height-21: 21px;
    --line-height-23: 23px;
    --line-height-26: 26px;
    --line-height-28: 28px;
    --line-height-31: 31px;
    --line-height-32: 32px;
    --line-height-39: 39px;
    --line-height-40: 40px;
    --line-height-46: 46px;
    --line-height-52: 52px;
    --line-height-62: 62px;
    --line-height-69: 69px;
    --letter-spacing-neg-1: -1px;
    --letter-spacing-neg-0-8: -0.8px;
    --letter-spacing-1: 1px;
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-5: 5px;
    --spacing-8: 8px;
    --spacing-20: 20px;
    --spacing-24: 24px;
    --spacing-25: 25px;
    --spacing-40: 40px;
    --spacing-50: 50px;
    
    /* Layout */
    --container-max-width: 1440px;
    --container-padding: 40px;
    
    /* Border Radius */
    --radius-4: 4px;
    --radius-8: 8px;
    --radius-30: 30px;
    
    /* Shadows */
    --shadow-header: 0px 1px 0px 0px var(--border);
    
    /* Button System Variables */
    --btn-border-radius-hero: 12px;         /* Hero CTA border radius (less rounded) */
    --btn-border-radius: 6px;                /* Standard rectangle border radius (slightly rounded) */
    --btn-border-radius-small: 4px;         /* Small variant border radius */
    --btn-padding-large: 20px 35px;         /* Hero/main CTAs */
    --btn-padding-standard: 14px 32px;      /* Standard CTAs - consistent width */
    --btn-padding-small: 12px 24px;         /* Compact CTAs */
    --btn-font-size-large: 26px;            /* Hero/main CTAs */
    --btn-font-size-standard: 16px;         /* Standard CTAs - consistent size */
    --btn-font-size-small: 14px;           /* Compact CTAs */
    --btn-min-width: 200px;                 /* Minimum width for consistent button sizes */
    --btn-gradient-angle: 179deg;           /* Consistent gradient angle for primary buttons */
    --btn-gradient-opacity: 0.07;           /* Gradient overlay opacity */
}