/* Variables para BeerCSS extraídas desde material-theme.json */

/* Tema Claro (Light Scheme) */
:root,
body.light {
  --primary: #994700;
  --on-primary: #FFFFFF;
  --primary-container: #F47C1F;
  --on-primary-container: #582600;
  --secondary: #242525;
  --on-secondary: #FFFFFF;
  --secondary-container: #3A3A3A;
  --on-secondary-container: #A5A4A3;
  --tertiary: #785A00;
  --on-tertiary: #FFFFFF;
  --tertiary-container: #F6C34A;
  --on-tertiary-container: #6D5000;
  --error: #BA1A1A;
  --on-error: #FFFFFF;
  --error-container: #FFDAD6;
  --on-error-container: #93000A;
  --background: #FFF8F5;
  --on-background: #241913;
  --surface: #FFF8F5;
  --on-surface: #241913;
  --surface-variant: #FBDCCC;
  --on-surface-variant: #574236;
  --outline: #8A7264;
  --outline-variant: #DEC1B1;
  --shadow: #000000;
  --scrim: #000000;
  --inverse-surface: #3A2E27;
  --inverse-on-surface: #FFEDE5;
  --inverse-primary: #FFB68A;
  --surface-dim: #EBD6CB;
  --surface-bright: #FFF8F5;
  --surface-container-lowest: #FFFFFF;
  --surface-container-low: #FFF1EA;
  --surface-container: #FFEADF;
  --surface-container-high: #FAE4D9;
  --surface-container-highest: #F4DED3;
}

/* Tema Oscuro (Dark Scheme) */
@media (prefers-color-scheme: dark) {
  :root {
      --primary: #FFB68A;
      --on-primary: #522300;
      --primary-container: #F47C1F;
      --on-primary-container: #582600;
      --secondary: #C8C6C6;
      --on-secondary: #303030;
      --secondary-container: #3A3A3A;
      --on-secondary-container: #A5A4A3;
      --tertiary: #FFE3AD;
      --on-tertiary: #3F2E00;
      --tertiary-container: #F6C34A;
      --on-tertiary-container: #6D5000;
      --error: #FFB4AB;
      --on-error: #690005;
      --error-container: #93000A;
      --on-error-container: #FFDAD6;
      --background: #1B110B;
      --on-background: #F4DED3;
      --surface: #1B110B;
      --on-surface: #F4DED3;
      --surface-variant: #574236;
      --on-surface-variant: #DEC1B1;
      --outline: #A68B7D;
      --outline-variant: #574236;
      --shadow: #000000;
      --scrim: #000000;
      --inverse-surface: #F4DED3;
      --inverse-on-surface: #3A2E27;
      --inverse-primary: #994700;
      --surface-dim: #1B110B;
      --surface-bright: #44362F;
      --surface-container-lowest: #160C07;
      --surface-container-low: #241913;
      --surface-container: #281D17;
      --surface-container-high: #342720;
      --surface-container-highest: #3F322B;
  }
}

body.dark {
    --primary: #FFB68A;
    --on-primary: #522300;
    --primary-container: #F47C1F;
    --on-primary-container: #582600;
    --secondary: #C8C6C6;
    --on-secondary: #303030;
    --secondary-container: #3A3A3A;
    --on-secondary-container: #A5A4A3;
    --tertiary: #FFE3AD;
    --on-tertiary: #3F2E00;
    --tertiary-container: #F6C34A;
    --on-tertiary-container: #6D5000;
    --error: #FFB4AB;
    --on-error: #690005;
    --error-container: #93000A;
    --on-error-container: #FFDAD6;
    --background: #1B110B;
    --on-background: #F4DED3;
    --surface: #1B110B;
    --on-surface: #F4DED3;
    --surface-variant: #574236;
    --on-surface-variant: #DEC1B1;
    --outline: #A68B7D;
    --outline-variant: #574236;
    --shadow: #000000;
    --scrim: #000000;
    --inverse-surface: #F4DED3;
    --inverse-on-surface: #3A2E27;
    --inverse-primary: #994700;
    --surface-dim: #1B110B;
    --surface-bright: #44362F;
    --surface-container-lowest: #160C07;
    --surface-container-low: #241913;
    --surface-container: #281D17;
    --surface-container-high: #342720;
    --surface-container-highest: #3F322B;
}

.brand-logo {
    max-height: 48px;
    width: auto;
    object-fit: contain;
}