/* css/variables.css */

/* Google Fonts Imports */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@500;700;800;900&display=swap');

:root {
  /* Color Palette */
  --primary-yellow: #FFD000;
  --primary-yellow-hover: #E6B800;
  --accent-red: #D32F2F;
  --accent-red-hover: #B71C1C;
  --bg-black: #080808;
  --bg-charcoal: #121212;
  --bg-card: #1C1C1C;
  --bg-card-hover: #262626;
  --text-white: #FFFFFF;
  --text-muted: #AFAFAF;
  --text-dark: #0A0A0A;
  
  /* Status Colors */
  --color-veg: #4CAF50;
  --color-nonveg: #F44336;
  --color-egg: #E8A33D;
  
  /* Typography */
  --font-logo: 'Anton', 'Impact', 'Arial Black', sans-serif;
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.7);
  --text-stroke-3d: 3px 3px 0px #000000;
  --box-stroke-3d: 4px 4px 0px #000000;
  
  /* Spacing */
  --container-width: 1200px;
  --header-height: 80px;
}

/* Base Accessibility / Dark mode fallback resets */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-black);
  color: var(--text-white);
  font-family: var(--font-body);
}

body {
  overflow-x: hidden;
  line-height: 1.6;
}