@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Manrope:wght@200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root {
  --color-primary: #273b14;
  --color-primary-container: #3d5229;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #acc591;

  --color-secondary: #775a19;
  --color-secondary-fixed: #ffdea5;
  --color-on-secondary-container: #785a1a;
  
  --color-background: #fbf9f4;
  --color-on-background: #1b1c19;
  
  --color-surface: #fbf9f4;
  --color-on-surface: #1b1c19;
  --color-on-surface-variant: #44483e;
  
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f5f3ee;
  --color-surface-container: #f0eee9;
  --color-surface-container-high: #eae8e3;
  --color-surface-container-highest: #e4e2dd;
  
  --color-outline: #75786d;
  --color-outline-variant: #c5c8bb;
  
  --color-error: #ba1a1a;
  
  /* Additional values used in HTML */
  --color-nav-bg: #fbf9f4;
  --color-footer-bg: #273b14;
  --color-footer-text: #fbf9f4;
  
  --gradient-gold: linear-gradient(135deg, #775a19 0%, #785a1a 100%);
  --art-deco-border-color: #775a19;
  --art-deco-border-opacity: 1;
}

html.dark {
  --color-primary: #e8c176;
  --color-primary-container: #2c281e;
  --color-on-primary: #131311;
  --color-on-primary-container: #e8c176;

  --color-secondary: #a3a59a;
  --color-secondary-fixed: #e8c176; /* Dark mode often overrides to gold */
  --color-on-secondary-container: #c6c7c0;
  
  --color-background: #131311;
  --color-on-background: #e5e2de;
  
  --color-surface: #1a1a17;
  --color-on-surface: #e5e2de;
  --color-on-surface-variant: #c6c7c0;
  
  --color-surface-container-lowest: #0e0e0c;
  --color-surface-container-low: #181916;
  --color-surface-container: #1c1c19;
  --color-surface-container-high: #22231f;
  --color-surface-container-highest: #2c281e;
  
  --color-outline: #454742;
  --color-outline-variant: rgba(69, 71, 66, 0.5); /* Faint outline */
  
  --color-error: #ffb4ab;
  
  /* Additional values */
  --color-nav-bg: rgba(19, 19, 17, 0.7);
  --color-footer-bg: #0e0e0c;
  --color-footer-text: #e5e2de;
  
  --gradient-gold: linear-gradient(135deg, #e8c176 0%, #b89a5e 100%);
  --art-deco-border-color: rgba(232, 193, 118, 0.2);
  --art-deco-border-opacity: 0.2;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.text-gold-gradient {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.art-deco-border {
  border-left: 1px solid var(--art-deco-border-color);
  border-right: 1px solid var(--art-deco-border-color);
}

.hero-mask {
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.bottle-label-border {
  border-left: 1px solid var(--art-deco-border-color);
  border-right: 1px solid var(--art-deco-border-color);
}

.gold-pattern {
  background-image: linear-gradient(45deg, var(--art-deco-border-color) 25%, transparent 25%, transparent 50%, var(--art-deco-border-color) 50%, var(--art-deco-border-color) 75%, transparent 75%, transparent);
  background-size: 4px 4px;
  opacity: 0.05;
}

.art-deco-bg {
  background-image: 
      linear-gradient(45deg, transparent 45%, var(--art-deco-border-color) 45%, var(--art-deco-border-color) 55%, transparent 55%),
      linear-gradient(-45deg, transparent 45%, var(--art-deco-border-color) 45%, var(--art-deco-border-color) 55%, transparent 55%);
  background-size: 60px 60px;
  background-repeat: repeat;
  opacity: 0.03;
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Nav specific */
.nav-bg {
  background-color: var(--color-nav-bg);
}
html.dark .nav-bg {
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(69, 71, 66, 0.15);
}

.footer-bg {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
}