/* ==========================================================================
   Apex Evergreen Pharma — Design System
   --------------------------------------------------------------------------
   Single source of truth for brand tokens: colors, typography, spacing,
   layout, and radii. Every other stylesheet and page should consume these
   custom properties rather than hard-coding values. Change the brand here.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     COLORS
     ---------------------------------------------------------------------- */

  /* Greens — surfaces & brand */
  --color-forest:      #0C1A12; /* deep near-black green — primary dark surface */
  --color-evergreen:   #1E3A2A; /* brand green */
  --color-sage:        #3F7A54; /* mid green — italic accents */
  --color-sage-light:  #5C9E76; /* lighter sage — accents on dark */

  /* Gold — the signature accent */
  --color-gold:        #C9A94A; /* muted gold — primary accent */
  --color-gold-deep:   #9A7B24; /* darker gold — gold text on light */

  /* Creams — light surfaces */
  --color-cream:       #FAF6EE; /* light section background */
  --color-cream-dark:  #EFE7D3; /* darker cream — borders/dividers on light */

  /* Bright logo lime — use VERY sparingly, accent only */
  --color-lime:        #7FBF3F;

  /* Text */
  --color-ink:               #14261C; /* near-black green — body text on light */
  --color-text-light:        #F5F0E4; /* off-white — text on dark */
  --color-text-muted-dark:   #A9B8AE; /* muted green-grey — muted text on dark */
  --color-text-muted-light:  #55665C; /* muted text on light */

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

  /* High-contrast elegant serif for headlines */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  /* Clean professional sans-serif for body text */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  /* Base type scale */
  --font-size-base: 16px;
  --line-height-base: 1.7;

  /* ----------------------------------------------------------------------
     SPACING SCALE
     Fluid-friendly rem-based steps used for margins, padding, gaps.
     ---------------------------------------------------------------------- */
  --space-xs:   0.5rem;  /*  8px */
  --space-sm:   0.75rem; /* 12px */
  --space-md:   1.25rem; /* 20px */
  --space-lg:   2rem;    /* 32px */
  --space-xl:   3rem;    /* 48px */
  --space-2xl:  5rem;    /* 80px */
  --space-3xl:  8rem;    /* 128px */

  /* ----------------------------------------------------------------------
     LAYOUT & SHAPE
     ---------------------------------------------------------------------- */
  --content-width: 1280px; /* max width of centered content */
  --radius: 12px;          /* standard border-radius */
  --header-height: 112px;  /* fixed header bar height (see js/header.js) */

  /* Elevation / transitions — small shared helpers for consistency */
  --shadow-soft: 0 10px 40px rgba(12, 26, 18, 0.12);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 300ms var(--ease);
}

/* --------------------------------------------------------------------------
   Base document defaults derived from the tokens above.
   Kept minimal here; the full reset lives in global.css.
   -------------------------------------------------------------------------- */
/* On small screens the header bar (and its logo) scale down — keep the token
   in sync so every page's header-clearance padding follows automatically. */
@media (max-width: 640px) {
  :root {
    --header-height: 92px;
  }
}

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  line-height: var(--line-height-base);
}