/* ======================================================
   GLOBAL COLOR VARIABLES — PREMIUM BAMBOO THEME
   ====================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  background: #faf8f3;
}

:root {

  /* Primary Brand Color */
  --color-primary: #2C6E49;     /* Deep Bamboo Green */

  /* Background Base */
  --color-secondary: #F6F3EA;   /* Warm Bamboo Cream */

  /* Natural Accent */
  --color-bamboo: #CFAF6B;      /* Natural Bamboo Wood */

  /* Dark Elements */
  --color-dark: #1B4332;        /* Forest Green */

  /* Soft Organic Green */
  --color-soft-green: #A3B18A;

  /* Neutral UI Colors */
  --color-white: #FFFFFF;
  --color-light-bg: #FAF8F3;
  --color-border: #E8E4D9;

  /* Text Colors */
  --color-text: #2E2E2E;
  --color-text-light: #6B6B6B;

  /* Shadows for premium UI */
  --shadow-soft: 0 6px 20px rgba(0,0,0,0.06);
  --shadow-hover: 0 12px 30px rgba(0,0,0,0.10);

  --card-bg-color: #fceecf

}

/* Example Usage */
/* background: var(--color-primary); */

/* ======================================================
   GLOBAL TYPOGRAPHY
   ====================================================== */

body{
  font-family:'Inter', sans-serif;
  font-size:16px;
  line-height:1.7;
  color:var(--color-text);
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;

  background:
  radial-gradient(circle at 10% 20%, rgba(163,177,138,0.15), transparent 40%),
  radial-gradient(circle at 90% 80%, rgba(207,175,107,0.15), transparent 45%),
  linear-gradient(
    180deg,
    #faf8f3 0%,
    #edf6ee 45%,
    #e3f1e7 100%
  );
}

/* Ensure font fallback renders immediately */
@font-face {
  font-family: 'Inter';
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  font-display: swap;
}


/* Headings */

h1,h2,h3,h4,h5,h6{
  font-family:'Playfair Display', serif;
  color:var(--color-dark);
  letter-spacing:0.3px;
  line-height:1.3;
}


/* Typography Scale */

h1{ font-size: clamp(32px, 4vw, 48px); }

h2{ font-size: clamp(26px, 3vw, 36px); }

h3{ font-size: clamp(20px, 2.2vw, 26px); }

h4{ font-size: clamp(17px, 1.6vw, 20px); }


p{
  color:var(--color-text-light);
}

.btn-primary{
  background:var(--color-primary);
  color:var(--color-white);
  padding:12px 26px;
  border-radius:8px;
  text-decoration:none;
  font-weight:500;
  transition:all .3s ease;
}

.btn-primary:hover{
  background:var(--color-dark);
  box-shadow:var(--shadow-hover);
}