/*
 * LatValley Design Tokens
 * Source: docs/00_color_system.md v4 Final
 *         docs/01_design_spec.md v2.0
 */

:root {
  /* Forest Green */
  --lv-green-deep: #2E3A1A;
  --lv-green-core: #3d4f22;
  --lv-green-mid: #4E7A22;
  --lv-green-light: #9ABF5C;
  --lv-green-pale: #E5EDCC;
  --lv-green-mist: #F4F7EE;

  /* Warm Golden and wood */
  --lv-gold-core: #C9A030;
  --lv-gold-light: #E0BB5A;
  --lv-gold-pale: #F0D98A;
  --lv-gold-dark: #A07828;
  --lv-wood: #7B4F2E;

  /* Warm Stone neutrals */
  --lv-bg: #FBF8F2;
  --lv-surface: #FFFFFF;
  --lv-border: #E4E0D8;
  --lv-body: #3D3028;
  --lv-muted: #8A8078;

  /* Typography: fonts are already loaded by the existing theme */
  --lv-font-heading: "Playfair Display", Georgia, serif;
  --lv-font-body: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --lv-font-size-base: 18px;
  --lv-line-height-body: 1.66;
  --lv-letter-spacing-label: 0.1em;

  /* Type scale */
  --lv-font-size-h1: 66px;
  --lv-font-size-h2: 60px;
  --lv-font-size-h3: 32px;
  --lv-font-size-h4: 28px;
  --lv-font-size-h5: 24px;
  --lv-font-size-h6: 20px;
  --lv-font-size-label: 14px;
  --lv-font-size-price: 32px;

  /* Spacing and layout */
  --lv-container-max: 1320px;
  --lv-container-padding: 15px;
  --lv-grid-columns: 12;
  --lv-grid-gap: 30px;
  --lv-space-1: 4px;
  --lv-space-2: 8px;
  --lv-space-3: 12px;
  --lv-space-4: 16px;
  --lv-space-5: 20px;
  --lv-space-6: 24px;
  --lv-space-7: 30px;
  --lv-space-8: 40px;
  --lv-space-9: 60px;
  --lv-space-10: 80px;
  --lv-space-11: 100px;
  --lv-section-padding: 100px;
  --lv-section-padding-compact: 60px;
  --lv-page-top-offset: 70px;

  /* Components */
  --lv-button-padding-y: 14px;
  --lv-button-padding-x: 32px;
  --lv-radius-sm: 4px;
  --lv-radius-md: 8px;
  --lv-radius-round: 50%;
  --lv-transition-fast: 0.25s ease;
  --lv-transition-base: 0.3s ease;

  /* Green-tinted shadows */
  --lv-shadow-sm: 0 2px 8px rgba(30, 45, 15, 0.06);
  --lv-shadow-md: 0 4px 24px rgba(30, 45, 15, 0.10);
  --lv-shadow-lg: 0 8px 40px rgba(30, 45, 15, 0.16);

  /* Approved gradients */
  --lv-gradient-hero: linear-gradient(
    to top,
    rgba(30, 45, 15, 0.78) 0%,
    rgba(30, 45, 15, 0.40) 40%,
    rgba(30, 45, 15, 0.08) 100%
  );
  --lv-gradient-shade: linear-gradient(
    135deg,
    #F4F7EE 0%,
    #FBF8F2 50%,
    #F4F7EE 100%
  );
  --lv-gradient-footer: linear-gradient(160deg, #2E3A1A 0%, #1F2811 100%);
  --lv-gradient-cta: linear-gradient(135deg, #2E3A1A 0%, #3d4f22 100%);
}

@media (max-width: 767px) {
  :root {
    --lv-container-padding: 16px;
    --lv-font-size-h1: 40px;
    --lv-font-size-h2: 32px;
    --lv-font-size-price: 28px;
    --lv-section-padding: 60px;
  }
}

@media (min-width: 1024px) {
  :root {
    --lv-page-top-offset: 80px;
  }
}