:root {

  
  --red:        #E00410; 
  --red-hover:  #C7040E; 
  --navy:       #282C48; 
  --blue:       #0070B3; 
  --gold:       #F8B800; 
  --wood:       #5C3410; 
  --ink:        #313131; 
  --ink-muted:  #6B6B6B; 
  --off-white:  #F6F6F6; 
  --border:     #C8C8C8; 
  --white:      #FFFFFF;

  
  --near-black: #0D0D0D;
  --near-black-rgb: 13, 13, 13;
  --red-rgb: 224, 4, 16;
  --navy-rgb: 40, 44, 72;

  

  

  
  --color-bg-page:        var(--white);      
  --color-bg-page-alt:    var(--off-white);  
  --color-bg-header:      var(--navy);       
  --color-bg-footer:      var(--navy);       
  --color-bg-card:        var(--white);      
  --color-bg-card-alt:    var(--white);      
  --color-bg-input:       var(--white);
  --color-bg-input-disabled: var(--off-white);
  --color-bg-overlay:     rgba(var(--near-black-rgb), 0.55); 
  --color-bg-badge:       var(--off-white);
  --color-bg-success:     var(--off-white);  
  --color-bg-error:       var(--off-white);  
  --color-bg-accent-wood: var(--wood);       

  
  --color-text-body:      var(--ink);        
  --color-text-heading:   var(--navy);       
  --color-text-display:   var(--navy);       
  --color-text-muted:     var(--ink-muted);  
  --color-text-inverse:   var(--white);      
  --color-text-link:      var(--blue);       
  --color-text-link-hover: var(--red-hover); 
  --color-text-error:     var(--red);        
  --color-text-success:   var(--ink);        
  --color-text-price:     var(--ink);        
  --color-rating-star:    var(--gold);       

  
  --color-nav-link:        var(--white);     
  --color-nav-link-hover:  var(--white);     

  
  --color-cta-bg:              var(--red);       
  --color-cta-bg-hover:        var(--red-hover); 
  --color-cta-text:            var(--white);
  --color-cta-bg-disabled:     var(--border);
  --color-cta-text-disabled:   var(--ink-muted);

  --color-btn-secondary-bg:          var(--white);
  --color-btn-secondary-text:        var(--navy);  
  --color-btn-secondary-border:      var(--navy);
  --color-btn-secondary-hover-bg:    var(--navy);
  --color-btn-secondary-hover-text:  var(--white);  

  
  --color-btn-outline-border:       var(--white);
  --color-btn-outline-text:         var(--white);   
  --color-btn-outline-hover-bg:     var(--white);
  --color-btn-outline-hover-text:   var(--navy);     

  
  --color-border-default:   var(--border);    
  --color-border-input:     var(--ink-muted); 
  --color-border-input-focus: var(--blue);    
  --color-border-input-error: var(--red);

  
  --color-focus-ring:          var(--blue);  
  --color-focus-ring-inverse:  var(--white); 

  
  --color-badge-bg:      var(--off-white);
  --color-badge-text:    var(--navy);   
  --color-badge-border:  var(--border);

  
  --color-strip-bg:    var(--off-white);
  --color-strip-text:  var(--ink);       
  --color-strip-accent: var(--blue);     

  
  --color-accent-wood: var(--wood);

  
  --font-heading: Georgia, "Times New Roman", Times, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;

  --text-xs:   0.8125rem; 
  --text-sm:   0.9375rem; 
  --text-base: 1.0625rem; 
  --text-md:   1.25rem;   
  --text-lg:   1.5rem;    
  --text-xl:   1.875rem;  
  --text-2xl:  2.25rem;   
  --text-3xl:  2.75rem;   
  --text-4xl:  clamp(2.25rem, 5vw + 1rem, 3.5rem); 

  --leading-tight:  1.15; 
  --leading-snug:   1.35;
  --leading-normal: 1.6;  
  --leading-relaxed: 1.75;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --tracking-tight: -0.01em; 
  --tracking-normal: 0;
  --tracking-wide: 0.04em;   

  
  --space-1:  0.25rem; 
  --space-2:  0.5rem;  
  --space-3:  0.75rem; 
  --space-4:  1rem;    
  --space-5:  1.25rem; 
  --space-6:  1.5rem;  
  --space-7:  1.75rem; 
  --space-8:  2rem;    
  --space-10: 2.5rem;  
  --space-12: 3rem;    
  --space-16: 4rem;    
  --space-20: 5rem;    
  --space-24: 6rem;    

  
  --touch-target-min: 44px;

  
  --radius-sm:   4px;
  --radius-base: 8px;
  --radius-lg:   16px;
  --radius-full: 999px;

  
  --shadow-sm: 0 1px 2px rgba(var(--near-black-rgb), 0.08);
  --shadow-md: 0 4px 12px rgba(var(--near-black-rgb), 0.12);
  --shadow-lg: 0 12px 32px rgba(var(--near-black-rgb), 0.18);
  --shadow-header: 0 2px 8px rgba(var(--near-black-rgb), 0.12);
  --shadow-bottom-bar: 0 -2px 10px rgba(var(--near-black-rgb), 0.14);

  
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;
  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);

  
  --z-header: 100;
  --z-bottom-bar: 150;
  --z-mobile-nav: 200;
  --z-skip-link: 300;

  
  --container-max: 1200px;
  --container-pad: 16px; 

  
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

@media (min-width: 768px) {
  :root { --container-pad: 24px; }
}
@media (min-width: 1024px) {
  :root { --container-pad: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
}