/**
 * Montuvia Design Tokens
 * Source: montuvia-design-system.jsx (lines 29-101)
 * Cocina Manaba - Ecuadorian Montuvio culture meets modern gastronomy
 */

:root {
  /* ========================================
     COLORS - Brand Primary
     ======================================== */
  --color-terracota: #935727;
  --color-terracota-light: #A86B3D;
  --color-terracota-dark: #7A4820;

  /* ========================================
     COLORS - Neutrals
     ======================================== */
  --color-creme: #CFC4B1;
  --color-creme-light: #E8E2D6;
  --color-creme-dark: #B5A994;

  /* ========================================
     COLORS - Accent
     ======================================== */
  --color-olive: #676127;
  --color-olive-light: #7D7635;
  --color-olive-dark: #524D1F;

  /* ========================================
     COLORS - Dark
     ======================================== */
  --color-midnight: #141414;
  --color-midnight-light: #2A2A2A;

  /* ========================================
     COLORS - Extended
     ======================================== */
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* ========================================
     COLORS - Gray Scale (warm, brand-derived)
     ======================================== */
  --color-gray-50: #FAF9F7;
  --color-gray-100: #F5F3EF;
  --color-gray-200: #E8E4DC;
  --color-gray-300: #D4CFC3;
  --color-gray-400: #B5AE9E;
  --color-gray-500: #8C8474;
  --color-gray-600: #6B6458;
  --color-gray-700: #4A453C;
  --color-gray-800: #2D2A24;
  --color-gray-900: #1A1816;

  /* ========================================
     COLORS - Semantic (earthy tones)
     ======================================== */
  --color-success: #5B7A3D;
  --color-success-light: #E8F0E0;
  --color-error: #A63D3D;
  --color-error-light: #F5E0E0;
  --color-warning: #B8860B;
  --color-warning-light: #FDF5E0;
  --color-info: #4A6B8A;
  --color-info-light: #E0EBF5;

  /* ========================================
     TYPOGRAPHY
     ======================================== */
  --font-display: "Super Normal", "Pally", system-ui, sans-serif;
  --font-ui: "Pally", "DM Sans", system-ui, sans-serif;
  --font-accent: "Super Normal", fantasy, system-ui;

  /* ========================================
     SPACING
     ======================================== */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;

  /* ========================================
     BORDER RADIUS
     ======================================== */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ========================================
     TRANSITIONS
     ======================================== */
  --transition-fast: 0.1s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* ========================================
     SHADOWS
     ======================================== */
  --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.05);
  --shadow-md: 0 4px 12px rgba(20, 20, 20, 0.08);
  --shadow-lg: 0 8px 24px rgba(20, 20, 20, 0.12);

  /* ========================================
     LAYOUT
     ======================================== */
  --container-max: 1200px;
  --container-padding: var(--space-md);
}

@media (min-width: 768px) {
  :root {
    --container-padding: var(--space-2xl);
  }
}