/* ==========================================
   TIERAVENDO
   GLOBAL DESIGN SYSTEM – VERSION 1.0
========================================== */

:root {
  /* BRANDING */
  --color-primary: #123f35;
  --color-primary-light: #26705b;
  --color-accent: #c5a46d;

  /* BACKGROUNDS */
  --color-bg: #f6f7f3;
  --color-surface: #ffffff;
  --color-footer: #123f35;

  /* TYPOGRAPHY COLORS */
  --color-heading: #123f35;
  --color-text: #24332e;
  --color-text-muted: #68746e;

  /* COMPONENT COLORS */
  --color-button-bg: var(--color-primary);
  --color-button-text: #ffffff;
  --color-border: #e2e7e2;

  /* FONTS */
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", Arial, sans-serif;

  /* LAYOUT */
  --container-width: 1320px;
  --page-gutter: 40px;

  /* HEADER */
  --header-height: 96px;

  /* HEADER – GLASS DESIGN */

  --header-bg: rgba(18, 35, 30, 0.78);
  --header-bg-solid: #172720;
  --header-text: #f5f1e8;
  --header-text-muted: #d5d9d1;
  --header-border: rgba(197, 164, 109, 0.28);

  /* GOLD BUTTONS */

  --gold-dark: #a98242;
  --gold-light: #f5d995;
  --gold-mid: #c69a50;
  --gold-glow: rgba(229, 190, 112, 0.35);

  /* HERO */
  --hero-home-height: 620px;
  --hero-page-height: 400px;

  /* TYPOGRAPHY */
  --font-h1-home: 68px;
  --font-h1-page: 54px;
  --font-h2: 44px;
  --font-h3: 26px;
  --font-body-size: 17px;

  /* SPACING */
  --section-spacing: 96px;
  --card-gap: 30px;

  /* RADIUS */
  --radius-card: 16px;
  --radius-button: 8px;
}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 1023px) {
  :root {
    --page-gutter: 30px;
    --header-height: 80px;

    --hero-home-height: 500px;
    --hero-page-height: 320px;

    --font-h1-home: 52px;
    --font-h1-page: 44px;
    --font-h2: 36px;
    --font-body-size: 16px;

    --section-spacing: 72px;
    --card-gap: 24px;
  }
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {
  :root {
    --page-gutter: 20px;
    --header-height: 68px;

    --hero-home-height: 480px;
    --hero-page-height: 260px;

    --font-h1-home: 38px;
    --font-h1-page: 34px;
    --font-h2: 30px;
    --font-body-size: 16px;

    --section-spacing: 56px;
    --card-gap: 16px;
  }
}