/* ============================================================
   GRNDHOUSE Design System — Colors & Typography
   Source: GH Social Media.fig (Figma)
   ============================================================ */

/* ------------------------------------------------------------
   GOOGLE FONTS (Roboto — free substitute for body)
   Evogria is a custom/commercial font. If unavailable, 
   the stack falls back to Oswald (similar condensed display feel).
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Roboto+Condensed:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* Evogria — GRNDHOUSE brand display font (the real headline face on grndhouse.com).
   Falls back to Oswald only if these files fail to load. */
@font-face {
  font-family: 'Evogria';
  src: url('fonts/evogria-regular.otf') format('opentype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Evogria';
  src: url('fonts/evogria-italic.otf') format('opentype');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* ------------------------------------------------------------
   COLOR TOKENS — Base Palette
   ------------------------------------------------------------ */
:root {
  /* Brand Orange — primary CTA, accents, quote marks */
  --color-orange:        #C76633;   /* rgb(199,102,51) — primary brand */
  --color-orange-light:  #FFA057;   /* rgb(241,165,84) — Rajah / hover state */
  --color-orange-dim:    rgba(200,103,51,0.30); /* overlay tint on dark photos */

  /* Neutrals — primary dark palette */
  --color-black:         #020000;   /* near-true black */
  --color-dark-1:        #1F1F1F;   /* Primary/Gray — default dark bg/text */
  --color-dark-2:        #2F2F2F;   /* Secondary Dark Charcoal */
  --color-dark-3:        #353534;   /* deep surface */
  --color-dark-4:        #474747;   /* mid-dark */
  --color-gray-1:        #565656;   /* Tertiary/Gray — disabled, secondary text */
  --color-gray-2:        #8B8A85;   /* Mushroom — metadata, muted text */
  --color-gray-3:        #CBCDCF;   /* pill/tag bg */
  --color-mist:          #E0E0E0;   /* Chinese White — borders, dividers */
  --color-ivory:         #F2F1EC;   /* Isabelline — light section bg, off-white */
  --color-white:         #FFFFFF;

  /* Gradient */
  --gradient-money-gray: linear-gradient(180deg, #313131 0%, #474747 11%, #8D8D8D 38%, #626262 68%, #2E2E2E 100%);
  --gradient-dark-overlay: linear-gradient(rgba(0,0,0,0.40), rgba(0,0,0,0.40));
  --gradient-orange-overlay: linear-gradient(rgba(200,103,51,0.30), rgba(200,103,51,0.30));

  /* System */
  --color-error:         #F11A1A;
  --color-success-bg:    #BCF0D8;   /* mint green — success states */
  --color-info-bg:       #BCB5F0;   /* periwinkle — info states */

  /* -------------------------------------------------------
     SEMANTIC COLOR TOKENS
  ------------------------------------------------------- */
  --bg-primary:          var(--color-dark-1);      /* default page bg (dark mode) */
  --bg-section-dark:     var(--color-black);        /* hero, full-bleed dark sections */
  --bg-section-light:    var(--color-ivory);        /* testimonials, programmes, FAQ */
  --bg-card:             var(--color-white);        /* testimonial cards */

  --text-primary:        var(--color-ivory);        /* body on dark bg */
  --text-inverse:        var(--color-dark-1);       /* body on light bg */
  --text-muted:          var(--color-gray-2);       /* metadata, location labels */
  --text-accent:         var(--color-orange);       /* quote marks, highlights */
  --text-label:          var(--color-gray-1);       /* disabled, secondary labels */

  --border-accent:       var(--color-orange);       /* card border highlight */
  --border-subtle:       var(--color-mist);         /* dividers */
  --border-dark:         var(--color-dark-1);

  --cta-bg:              var(--color-orange);
  --cta-text:            var(--color-dark-1);
  --cta-outline-border:  var(--color-dark-1);
  --cta-outline-text:    var(--color-dark-1);

  /* -------------------------------------------------------
     SPACING SCALE
  ------------------------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Section padding (used in website sections) */
  --section-padding-v:   95px;
  --section-padding-h:   120px;
  --container-max:       1200px;

  /* -------------------------------------------------------
     BORDER RADIUS
  ------------------------------------------------------- */
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-pill:  100px;  /* capsule buttons */
  --radius-full:  50%;

  /* -------------------------------------------------------
     SHADOWS
  ------------------------------------------------------- */
  --shadow-card:      0px 2px 3px 0px rgba(0,0,0,0.03);
  --shadow-card-hover: 0px 4px 16px 0px rgba(0,0,0,0.12);
  --shadow-text-protect: 10px 10px 100px 186px rgb(0,0,0); /* text legibility on photos */

  /* -------------------------------------------------------
     TYPOGRAPHY TOKENS
  ------------------------------------------------------- */

  /* Font Families */
  --font-display:   'Evogria', 'Oswald', sans-serif;     /* Headlines, brand wordmarks — ALL CAPS */
  --font-body:      'Roboto Condensed', 'Roboto', sans-serif;  /* Body copy, UI labels */
  --font-ui:        'Inter', sans-serif;                  /* Metadata, tags, small labels */

  /* Font Sizes — Type Scale */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    22px;
  --text-xl:    24px;
  --text-2xl:   28px;
  --text-3xl:   36px;
  --text-4xl:   45px;
  --text-5xl:   57px;
  --text-6xl:   65px;
  --text-7xl:   76px;

  /* Line Heights */
  --leading-tight:    1.14;   /* ~display headlines */
  --leading-snug:     1.25;
  --leading-normal:   1.27;
  --leading-relaxed:  1.33;   /* body copy */
}

/* ------------------------------------------------------------
   SEMANTIC TYPE STYLES
   ------------------------------------------------------------ */

/* Display / Hero Headlines — Evogria, ALL CAPS */
.h1-display {
  font-family: var(--font-display);
  font-size: var(--text-7xl);       /* 76px */
  line-height: 92px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--text-primary);
}

.h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);       /* 57px */
  line-height: 64px;
  letter-spacing: -0.25px;
  text-transform: uppercase;
  color: var(--text-inverse);
}

.h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);       /* 28px */
  line-height: 36px;
  text-transform: uppercase;
  color: var(--text-primary);
}

.h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);        /* 24px */
  line-height: 32px;
  text-transform: uppercase;
  color: var(--text-accent);
}

/* Subheading / Section label */
.label-section {
  font-family: var(--font-display);
  font-size: var(--text-lg);        /* 22px */
  line-height: 28px;
  text-transform: uppercase;
  letter-spacing: 0.1px;
  color: var(--text-accent);
}

/* Body copy — Roboto Condensed */
.body-lg {
  font-family: var(--font-body);
  font-size: var(--text-lg);        /* 22px */
  line-height: 28px;
  color: var(--text-primary);
}

.body-md {
  font-family: var(--font-body);
  font-size: var(--text-xl);        /* 24px */
  line-height: 32px;
  color: var(--text-primary);
}

.body-sm {
  font-family: var(--font-body);
  font-size: var(--text-2xl);       /* 28px */
  line-height: 36px;
  color: var(--text-inverse);
}

/* UI / Meta labels — Inter */
.label-ui {
  font-family: var(--font-ui);
  font-size: var(--text-sm);        /* 14px */
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.25px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.label-tag {
  font-family: var(--font-ui);
  font-size: var(--text-sm);        /* 14px */
  font-weight: 600;
  line-height: 20px;
  color: var(--color-dark-1);
}

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 38px;
  border-radius: var(--radius-pill);
  background-color: var(--color-orange);
  border: 2px solid var(--color-orange);
  font-family: var(--font-display);
  font-size: var(--text-2xl);       /* 28px */
  line-height: 36px;
  text-transform: uppercase;
  color: var(--color-dark-1);
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.btn-primary:hover { opacity: 0.88; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 38px;
  border-radius: var(--radius-pill);
  background-color: transparent;
  border: 2px solid var(--color-dark-1);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 36px;
  text-transform: uppercase;
  color: var(--color-dark-1);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.btn-outline:hover { background-color: var(--color-dark-1); color: var(--color-ivory); }

.btn-outline-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 38px;
  border-radius: var(--radius-pill);
  background-color: transparent;
  border: 2px solid var(--color-ivory);
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: 24px;
  letter-spacing: 0.1px;
  text-transform: uppercase;
  color: var(--color-ivory);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.btn-outline-light:hover { background-color: rgba(242,241,236,0.1); }

/* Pill / Tag chips */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background-color: var(--color-gray-3);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-dark-2);
}