/*
--- 01 TYPOGRAPHY SYSTEM

- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Font weights
Default: 400
Medium: 500
Semi-bold: 600
Bold: 700

- Line heights
Default: 1
Small: 1.05
Medium: 1.2
Paragraph default: 1.6
Large: 1.8

- Letter spacing
-0.5px
0.75px

--- 02 COLORS

- Primary: #69c27d
- Secondary: #ffb86c

- Primary tints:
#f0f9f2
#e1f3e5
#549b64

- Shades: 
#5faf71
#1f3a25

- Accents:
- Greys

#888
#767676 (lightest grey allowed on #fff)
#6f6f6f (lightest grey allowed on #fdf2e9)
#555
#333

--- 05 SHADOWS

0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);

--- 06 BORDER-RADIUS

Default: 9px
Medium: 11px

--- 07 WHITESPACE

- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/

:root {
  --bg: #0a0f0a;
  --fg: #f7f7f5;
  --muted: #c5c8c6;
  --accent: #69c27d; /* fresh herb green */
  --accent-2: #ffb86c; /* warm flame orange */
  --glass: rgba(10, 15, 10, 0.7);
  --radius: 20px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

  --clr-primary: #69c27d;
  --clr-primary-light: #f0f9f2;
  --clr-primary-mid: #e1f3e5;
  --clr-primary-dark: #549b64;
  --clr-primary-shade: #1f3a25;

  --clr-secondary: #ffb86c;

  --clr-grey-100: #767676;
  --clr-grey-200: #6f6f6f;
  --clr-grey-300: #555;
  --clr-grey-400: #333;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;

  overflow-x: hidden;
}

body {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica,
    Arial, sans-serif;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  background-image: radial-gradient(
      1200px 600px at 80% 10%,
      rgba(105, 194, 125, 0.15),
      transparent 60%
    ),
    radial-gradient(
      800px 500px at 10% 90%,
      rgba(255, 184, 108, 0.15),
      transparent 60%
    ),
    linear-gradient(rgba(8, 10, 8, 0.65), rgba(8, 10, 8, 0.65)),
    url("https://images.unsplash.com/photo-1559339352-11d035aa65de?q=80&w=2070&auto=format&fit=crop");
  background-size: cover;
  background-position: center;
  filter: saturate(1.05);
}

/**************************/
/* GENRAL REUSABLE COMPONENTS */
/**************************/

.container {
  /* 1140px */
  max-width: 120rem;
  padding: 0 3.2rem;
  margin: 0 auto;
}

.heading-primary,
.heading-secondary,
.heading-tertiary {
  font-weight: 700;
  color: var(--fg);
  /* color: #45260a; */
  /* color: #343a40; */
  letter-spacing: -0.5px;
}

.heading-primary {
  font-size: 5.2rem;
  line-height: 1.05;
  margin-bottom: 3.2rem;
}

.heading-secondary {
  font-size: 4.4rem;
  line-height: 1.2;
  margin-bottom: 9.6rem;
}

.heading-tertiary {
  font-size: 3rem;
  line-height: 1.2;
  margin-bottom: 3.2rem;
}

.subheading {
  display: block;
  font-size: 1.6rem;
  font-weight: 500;
  color: #cf711f;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
  letter-spacing: 0.75px;
}

.section-divider {
  height: 10rem;
  background: linear-gradient(rgba(10, 15, 10, 0.6), rgba(10, 15, 10, 0.95));
  backdrop-filter: blur(12px);
}