/*
Theme Name: Maison Todit Theme
Theme URI: https://maison-todit.ma
Author: Maison Todit Engineering
Author URI: https://maison-todit.ma
Description: Custom WordPress artisanal theme for Fromagerie Maison Todit Agadir with responsive glassmorphism header, mobile drawer navigation, Platter Calculator, catalog filtering, and WhatsApp conversion funnel.
Version: 1.0.0
Text Domain: maison-todit
*/

/* ==========================================================================
   Design Tokens (Stitch AI Package Synchronized)
   ========================================================================== */
:root {
  /* Color Palette */
  --color-primary-bg: #FAF7F2;      /* Warm Ivory Cream */
  --color-surface-card: #FFFFFF;    /* Pure White */
  --color-text-main: #2B2621;       /* Espresso Crust */
  --color-text-muted: #6E675F;      /* Soft Mocha Gray */
  --color-accent-gold: #D99B26;     /* Honey & Aged Cheddar Gold */
  --color-accent-hover: #B8801B;    /* Darker Cheddar Gold */
  --color-sage-green: #7A8C7B;      /* Moroccan Sage */
  --color-sage-light: #EBF0EC;      /* Soft Sage Tint */
  --color-border-light: #EBE5DF;    /* Soft Ivory Border */
  --color-border-focus: #D99B26;

  /* Layout Spacing Design Tokens */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Elevation & Visual Effects */
  --glass-bg: rgba(250, 247, 242, 0.88);
  --glass-blur: blur(12px);
  --glass-border: rgba(235, 229, 223, 0.7);
  --shadow-card: 0 10px 30px rgba(43, 38, 33, 0.05);
  --shadow-hover: 0 15px 35px rgba(217, 155, 38, 0.15);
  --shadow-floating: 0 20px 40px rgba(43, 38, 33, 0.12);

  /* Touch Targets & Layout Dimensions */
  --touch-target-min: 48px;
  --radius-sm: 8px;
  --radius-card: 16px;
  --radius-pill: 9999px;
  --header-height: 80px;
  --container-max: 1200px;
}

/* ==========================================================================
   Global Reset & Base Styles
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-main);
  background-color: var(--color-primary-bg);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-main);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.section-padding {
  padding: var(--space-xl) 0;
}

@media (max-width: 768px) {
  .section-padding {
    padding: var(--space-lg) 0;
  }
}