/* Tokens de marca – Delivery Chincha (colores del logotipo) */
:root {
  /* Marca – verde DELIVERY, rojo pin, gris CHINCHA */
  --color-brand-green: #60AF31;
  --color-brand-green-dark: #4e9228;
  --color-brand-green-light: #9fd86a;
  --color-brand-red: #C7425B;
  --color-brand-red-dark: #a8364d;
  --color-brand-grey: #4E4E4E;
  --color-brand-black: #111111;

  /* Alias funcionales */
  --color-primary: var(--color-brand-green);
  --color-primary-dark: var(--color-brand-green-dark);
  --color-primary-submenu: #578f2b;
  --color-secondary: var(--color-brand-green);
  --color-accent: var(--color-brand-green);
  --color-accent-orange: var(--color-brand-red);
  --color-accent-orange-dark: var(--color-brand-red-dark);

  /* Superficies */
  --color-background: #F5F5F5;
  --color-surface: #FFFFFF;
  --color-text-dark: #1a1a1a;
  --color-text-medium: var(--color-brand-grey);
  --color-text-light: #8a8a8a;

  /* Bordes y sombras */
  --color-border-light: #E5E5E5;
  --color-border-focus: var(--color-brand-green);
  --color-shadow-base: rgba(0, 0, 0, 0.06);
  --color-shadow-hover: rgba(96, 175, 49, 0.2);
  --color-primary-alpha-06: rgba(96, 175, 49, 0.06);
  --color-primary-alpha-08: rgba(96, 175, 49, 0.08);
  --color-primary-alpha-15: rgba(96, 175, 49, 0.15);
  --color-primary-alpha-25: rgba(96, 175, 49, 0.25);
  --radius-card: 12px;
  --radius-btn: 8px;
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
  --container-max: 1320px;

  /* Header */
  --color-header: #ffffff;
  --color-header-icono: var(--color-brand-green);
  --color-header-text: var(--color-text-dark);
  --color-header-menu-background: var(--color-brand-red);
  --color-header-menu-text: #ffffff;
  --color-header-menu-background-active: var(--color-brand-green);
  --color-header-menu-text-active: #ffffff;
  --color-header-menu-background-hover: var(--color-brand-black);
  --color-header-menu-text-hover: #ffffff;
  --color-header-menu-movil-text: var(--color-text-dark);
  --color-header-btn-uno: var(--color-primary);
  --color-header-btn-uno-text: #ffffff;
  --color-header-btn-dos: transparent;
  --color-header-btn-dos-text: var(--color-text-dark);
  --color-header-btn-dos-hover: var(--color-brand-green);
  --color-header-btn-dos-hover-text: #ffffff;
  --color-header-btn-tres: var(--color-primary);
  --color-header-btn-tres-text: #ffffff;

  /* Footer – fondo oscuro como el logotipo */
  --color-accent-sec: #0a0a0a;
  --color-footer-bg: var(--color-brand-black);
  --color-footer-iconos: var(--color-brand-green);
  --color-footer-text-title: #ffffff;
  --color-footer-text: #b0b0b0;
  --color-footer-text-gris: var(--color-brand-grey);
  --color-footer-marca: #ffffff;

  /* Estado */
  --color-success: var(--color-brand-green);
  --color-danger: var(--color-brand-red);
  --color-info: #3b82f6;
  --color-cart-badge: var(--color-brand-red);
  --color-input-border: #E5E5E5;
  --color-desc-badge: var(--color-brand-red);
  --color-cart-title: var(--color-text-dark);

  /* Alias legacy */
  --color-primary-green: var(--color-primary);
  --color-secondary-green: var(--color-secondary);
  --color-light-green: var(--color-accent);
  --card-shadow-color: var(--color-shadow-base);
  --card-border-color: var(--color-border-light);
  --card-hover-border-color: var(--color-primary);
  --card-hover-shadow: var(--color-shadow-hover);
  --card-hover-shadow-focus: var(--color-primary-alpha-25);
  --text-dark: var(--color-text-dark);
  --text-medium: var(--color-text-medium);
  --price-color: var(--color-primary);
  --button-color: var(--color-primary);
}
