/* ============================================================
   Current on Center — controlled design tokens
   Extracted 1:1 from the live theme (trinitas-2025).
   This file is the single source of truth for color, type,
   radius, spacing, buttons and headings used by every section.
   ============================================================ */

:root {
  /* ---- Palette (exact theme values) ---- */
  --color-primary:        #708573;   /* sage green   */
  --color-primary-darker: #596a5c;
  --color-secondary:      #a44a3f;   /* terracotta   */
  --color-secondary-darker:#833b32;
  --color-tertiary:       #253746;   /* deep navy    */
  --color-tertiary-darker:#1d2c38;
  --color-quaternary:     #c07d59;   /* warm tan     */
  --color-quaternary-darker:#996447;
  --color-white:          #ffffff;
  --color-body-bg:        #fff6ec;   /* cream        */
  --color-body-bg-darker: #ccc4bc;
  --color-top-bar-bg:     #253746;
  --color-footer-bg:      var(--color-secondary);
  --color-fg:             #1d2c38;
  --color-muted:          #7d7d7d;
  --color-border:         #ccc4bc;

  /* ---- Type families ---- */
  --font-family-hero:     "Instrument Serif", serif;
  --font-family-heading:  "Instrument Serif", serif;
  --font-family-subheading:"Instrument Serif", serif;
  --font-family-body:     "Poppins", system-ui, -apple-system, sans-serif;
  --font-family-buttons:  "Poppins", system-ui, sans-serif;
  --font-weight-heading:  400;
  --font-weight-subheading:600;
  --font-weight-body:     400;
  --font-weight-buttons:  600;

  /* ---- Heading scale (px values, fed to the clamp below) ---- */
  --h1: 60; --h2: 46; --h3: 36; --h4: 28; --h5: 20; --h6: 16;

  /* ---- Shape & rhythm ---- */
  --border-radius: 2.25rem;
  --gap:   clamp(15px, 10vw, 60px);
  --x-gap: 2.8125vw;
  --y-gap: clamp(3.75rem, 4.17vw, 5rem);
  --base-timing: .3s ease;
}

/* ---- Base ---- */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-body);
  color: var(--color-fg);
  background: var(--color-body-bg);
  line-height: 1.6;
}
.container { position: relative; max-width: 1600px; margin-inline: auto; }

/* ---- Headings: exact theme clamp formula ---- */
h1,h2,h3,h4,h5,h6,.heading {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  line-height: 1.2;
  margin: 0 0 1rem;
  text-transform: uppercase;
  font-size: clamp(calc(var(--heading) * 0.75 / 10 * 10px),
                   calc(var(--heading) / 1200 * 100vw),
                   calc(var(--heading) / 10 * 10px));
}
h1,.h1 { --heading: var(--h1); }
h2,.h2 { --heading: var(--h2); }
h3,.h3 { --heading: var(--h3); }
.smaller-size { --heading: 46; }   /* hero h1 + most section h2s */
.title { --h2: 32; --heading: var(--h2); text-transform: uppercase;
         font-family: var(--font-family-heading); font-weight: var(--font-weight-heading);
         font-size: clamp(calc(var(--heading) * 0.75 / 10 * 10px),
                          calc(var(--heading) / 1200 * 100vw),
                          calc(var(--heading) / 10 * 10px)); margin: 0 0 1rem; }

/* ---- Buttons (token-driven, exact behaviour) ---- */
.btn {
  --btn-color: #000; --btn-color-darker: #7d7d7d; --text-color: #fff;
  font-family: var(--font-family-buttons);
  font-weight: var(--font-weight-buttons);
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  font-size: 1rem; line-height: 1; text-transform: uppercase; text-decoration: none;
  min-width: 15.5rem; padding: 1rem 2rem;
  border: 1px solid var(--btn-color);
  border-radius: 2rem;
  color: var(--text-color); background-color: var(--btn-color);
  cursor: pointer; transition: background-color var(--base-timing), color var(--base-timing), border-color var(--base-timing);
}
.btn:hover,.btn:focus { background-color: var(--btn-color-darker); border-color: var(--btn-color-darker); text-decoration: none; }
.btn-alt { color: var(--btn-color); background-color: transparent; }
.btn-alt:hover,.btn-alt:focus { color: var(--text-color); background-color: var(--btn-color); border-color: var(--btn-color); }
.btn-primary   { --btn-color:#708573; --btn-color-darker:#596a5c; --text-color:#fff; }
.btn-secondary { --btn-color:#a44a3f; --btn-color-darker:#833b32; --text-color:#fff; }
.btn-tertiary  { --btn-color:#253746; --btn-color-darker:#1d2c38; --text-color:#fff; }
.btn-white     { --btn-color:#ffffff; --btn-color-darker:#cccccc; --text-color:#a44a3f; }
.btn-small     { min-width: 7rem; font-size: 12px; padding: .3em 2rem; }

/* ---- Shared overlay used by hero + banner ---- */
.overlay { position: absolute; inset: 0; width: 100%; height: 100%;
           background-color: rgba(0,0,0,.3); z-index: 0; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }