/* =============================================
   VENDOR: GLOBAL VARIABLES & RESETS
   ============================================= */

:root {
  /* Strict Color Palette */
  --color-primary: #00674f;
  --color-primary-lt: #00876a;
  --color-primary-md: #004d3a;
  --color-primary-dk: #002e23;
  --color-corp-1: #141414;
  --color-corp-2: #0a0a0a;

  --color-accent: #10b981;
  --color-bg: #f4f6f5;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-muted: #5f6f69;
  --color-muted-strong: #4a5954;

  /* Typography Setup */
  --font-ui: "Inter", system-ui, sans-serif;
  --font-heading: "Quantico", sans-serif;
  --font-hand: "Caveat", cursive;

  /* Typography Scale (Major Third - 1.250 Base 16px) */
  --text-base: 1rem;
  --text-sm: 0.8rem;
  --text-xs: 0.64rem;
  --text-h6: 1.25rem;
  --text-h5: 1.563rem;
  --text-h4: 1.953rem;
  --text-h3: 2.441rem;
  --text-h2: 3.052rem;
  --text-h1: 3.815rem;

  /* Spacing Rhythm (Strict 8-Point Grid) */
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-128: 128px;

  /* Layout & FX */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --transition: 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

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

html,
body {
  height: 100%;
  font-family: var(--font-ui);
  font-size: 16px;
  background-color: var(--color-bg);
  color: var(--color-black);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font-family: inherit;
}