/*
 * Copyright (c) 2025 Davide Guerri <davide.guerri@gmail.com>
 *
 * This work is licensed under the Creative Commons Attribution-NonCommercial 4.0
 * International License. To view a copy of this license, visit
 * http://creativecommons.org/licenses/by-nc/4.0/
 */

/* ========================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ======================================== */

:root {
  /* Wine Colors (Red theme) */
  --color-wine-primary: #c62828;
  --color-wine-dark: #b71c1c;
  --color-wine-light: #e57373;
  --color-wine-lightest: #ffebee;
  --color-wine-rosso: #b71c1c;

  /* Food Colors (Blue theme) */
  --color-food-primary: #1976d2;
  --color-food-dark: #1565c0;
  --color-food-light: #64b5f6;
  --color-food-lightest: #e3f2fd;

  /* Badge/Score Colors */
  --color-badge-low: #dc3545;      /* Red - Low score (2-4) */
  --color-badge-low-alt: #d32f2f;
  --color-badge-low-light: #e57373;
  --color-badge-medium: #ffc107;   /* Yellow - Medium score (5-7) */
  --color-badge-medium-dark: #f57c00;
  --color-badge-medium-light: #ffb74d;
  --color-badge-medium-lightest: #fff3e0;
  --color-badge-high: #28a745;     /* Green - High score (8-10) */
  --color-badge-high-dark: #2e7d32;
  --color-badge-high-light: #66bb6a;
  --color-badge-high-lightest: #e8f5e9;

  /* Other Wine Display Colors */
  --color-wine-bianco: #f57f17;
  --color-wine-rosato: #c2185b;
  --color-wine-default: #0d6efd;

  /* Responsive Breakpoints */
  --breakpoint-mobile: 767px;
  --breakpoint-tablet-min: 768px;
  --breakpoint-tablet-max: 991px;
  --breakpoint-desktop: 1200px;

  /* Spacing */
  --spacing-mobile: 12px;
  --spacing-tablet: 16px;
  --spacing-desktop: 24px;
}

/* ========================================
   COMMON STYLES
   ======================================== */

body {
  padding: var(--spacing-desktop);
}

/* Navbar styles */
.navbar {
  margin: -24px -24px 0 -24px;
  border-radius: 0;
}

/* Language switcher styles */
.language-form {
  margin: 0;
}

.language-form button {
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  cursor: pointer;
}

/* Common button styles */
.action-btn {
  min-width: 180px;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s;
  border-width: 2px;
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Legacy class name support */
.pairing-btn {
  min-width: 180px;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s;
  border-width: 2px;
}

.pairing-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Mobile responsive */
@media screen and (max-width: 767px) {
  body {
    padding: var(--spacing-mobile);
  }

  .navbar {
    margin: calc(-1 * var(--spacing-mobile)) calc(-1 * var(--spacing-mobile)) 0 calc(-1 * var(--spacing-mobile));
  }

  .navbar .dropdown {
    position: static;
  }

  .navbar .dropdown-menu {
    position: absolute !important;
    left: var(--spacing-mobile) !important;
    right: var(--spacing-mobile) !important;
    width: auto !important;
  }

  .action-btn,
  .pairing-btn {
    width: 100%;
    min-width: unset;
  }
}

/* Tablet optimizations */
@media screen and (min-width: 768px) and (max-width: 991px) {
  body {
    padding: var(--spacing-tablet);
  }

  .navbar {
    margin: calc(-1 * var(--spacing-tablet)) calc(-1 * var(--spacing-tablet)) 0 calc(-1 * var(--spacing-tablet));
  }
}