:root {
  /* PRIMARY */
  --primary-color: #A67D4F;              
  --on-primary-color: #FFFFFF;           
  --primary-variant-color: #F1BE7F;      
  --on-primary-variant-color: #84603A;   

  /* SECONDARY */
  --secondary-color: #62411E;           
  --on-secondary-color: #151515;        

  /* SURFACE */
  --surface-color: #FFFFFF;             
  --on-surface-color: #151515;          
  --surface-tertiary-color: rgba(0, 0, 0, 0.1); 

  /* FOREGROUND */
  --foreground-medium-emphasis-color: rgba(0, 0, 0, 0.6);  
  --foreground-high-emphasis-color: rgba(0, 0, 0, 0.87);   

  /* BORDER */
  --border-color: #EBEBEB;               
  --on-border-color: #F0F0F0;           

  /* BACKGROUND */
  --background-color: #F7F9FB;           
  --on-background-color: #151515;        

  /* SUCCESS / ERROR (not in image, kept) */
  --success-color: #04AD34;             
  --on-success-color: #04AD34;           
  --error-color: #D00009;                
  --on-error-color: #D00009;             
  /* GENERIC FOREGROUND */
  --foreground-color: rgba(0, 0, 0, 0.87);      
  --on-foreground-color: rgba(0, 0, 0, 0.38);    

  /* TOP BAR / FOOTER / MISC (not in image, kept) */
  --top-bar-color: #1e1e1e;              
  --top-bar-font-color: #cccccc;         
  --footer-color: #ffffff;               
  --footer-font-color: rgba(0, 0, 0, 0.87); 
  --button-bar-color: #ffffff;           
  --view-all-category-color: #ffffff;    
  --view-all-category-font-color: #555555; 
}