/*
 * Infinity Rise — Design System (tokens)
 * Colors · Inter Tight · responsive typography · spacing · buttons.
 * Desktop-first: 1920 base, steps down via max-width media queries.
 * Bands: base >=1537 · 1536 · 1440 · 1280 · 1024 · 425 · 393
 */

:root {
  /* Colors */
  --color-primary:    #06402A;
  --color-secondary:  #A97F2D;
  --color-ancient:    #E2C58D;
  --color-bg-1:       #E5DFD3;
  --color-bg-2:       #F6F2EF;
  --color-bg-3:       #FFFFFF;
  --color-black:      #1A1A1A;
  --color-white:      #FFFFFF;

  /* Font */
  --font-primary: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography */
  --fs-h1: 72px; --fs-h2: 56px; --fs-h3: 52px; --fs-h4: 42px; --fs-h5: 32px; --fs-h6: 24px; --fs-p: 20px;

  /* Spacing */
  --hdr-pt: 26px;  --hdr-pb: 26px;  --hdr-pl: 100px; --hdr-pr: 100px;
  --bnr-h: 800px;
  --bnr-pt: 280px; --bnr-pb: 140px; --bnr-pl: 250px; --bnr-pr: 250px;
  --sec-pt: 150px; --sec-pb: 150px; --sec-pl: 100px; --sec-pr: 100px;
  --sec2-pt: 150px; --sec2-pb: 150px; --sec2-pl: 200px; --sec2-pr: 200px;
  --ftr-pt: 100px; --ftr-pb: 50px; --ftr-pl: 100px; --ftr-pr: 100px;
}

@media (max-width: 1536px) { :root {
  --fs-h1: 60px; --fs-h2: 42px; --fs-h3: 38px; --fs-h4: 30px; --fs-h5: 24px; --fs-h6: 20px; --fs-p: 16px;
  --hdr-pt: 20px; --hdr-pb: 20px; --hdr-pl: 90px; --hdr-pr: 90px;
  --bnr-h: 700px; --bnr-pt: 250px; --bnr-pb: 100px; --bnr-pl: 220px; --bnr-pr: 220px;
  --sec-pt: 120px; --sec-pb: 120px; --sec-pl: 90px; --sec-pr: 90px;
  --sec2-pt: 100px; --sec2-pb: 100px; --sec2-pl: 190px; --sec2-pr: 190px;
  --ftr-pt: 90px; --ftr-pb: 40px; --ftr-pl: 90px; --ftr-pr: 90px;
} }
@media (max-width: 1440px) { :root {
  --fs-h1: 52px; --fs-h2: 42px; --fs-h3: 38px; --fs-h4: 28px; --fs-h5: 22px; --fs-h6: 18px; --fs-p: 16px;
  --hdr-pt: 18px; --hdr-pb: 18px; --hdr-pl: 80px; --hdr-pr: 80px;
  --bnr-h: 600px; --bnr-pt: 230px; --bnr-pb: 80px; --bnr-pl: 200px; --bnr-pr: 200px;
  --sec-pt: 100px; --sec-pb: 100px; --sec-pl: 80px; --sec-pr: 80px;
  --sec2-pt: 100px; --sec2-pb: 80px; --sec2-pl: 170px; --sec2-pr: 170px;
  --ftr-pt: 80px; --ftr-pb: 40px; --ftr-pl: 80px; --ftr-pr: 80px;
} }
@media (max-width: 1280px) { :root {
  --fs-h1: 48px; --fs-h2: 32px; --fs-h3: 34px; --fs-h4: 22px; --fs-h5: 20px; --fs-h6: 16px; --fs-p: 14px;
  --hdr-pt: 16px; --hdr-pb: 16px; --hdr-pl: 70px; --hdr-pr: 70px;
  --bnr-h: 500px; --bnr-pt: 200px; --bnr-pb: 80px; --bnr-pl: 180px; --bnr-pr: 180px;
  --sec-pt: 80px; --sec-pb: 80px; --sec-pl: 70px; --sec-pr: 70px;
  --sec2-pt: 80px; --sec2-pb: 80px; --sec2-pl: 150px; --sec2-pr: 150px;
  --ftr-pt: 70px; --ftr-pb: 40px; --ftr-pl: 70px; --ftr-pr: 70px;
} }
@media (max-width: 1024px) { :root {
  --fs-h1: 38px; --fs-h2: 30px; --fs-h3: 26px; --fs-h4: 20px; --fs-h5: 18px; --fs-h6: 16px; --fs-p: 14px;
  --hdr-pt: 12px; --hdr-pb: 12px; --hdr-pl: 60px; --hdr-pr: 60px;
  --bnr-h: 450px; --bnr-pt: 170px; --bnr-pb: 50px; --bnr-pl: 140px; --bnr-pr: 140px;
  --sec-pt: 80px; --sec-pb: 80px; --sec-pl: 70px; --sec-pr: 70px;
  --sec2-pt: 80px; --sec2-pb: 60px; --sec2-pl: 120px; --sec2-pr: 120px;
  --ftr-pt: 60px; --ftr-pb: 30px; --ftr-pl: 60px; --ftr-pr: 60px;
} }
/* Mobile (<=768px): uniform 24px top & bottom on content sections, site-wide. */
@media (max-width: 768px) { :root { --sec-pt: 24px; --sec-pb: 24px; } }
@media (max-width: 425px) { :root {
  /* 425px mirrors 393px except the banner (per request) */
  --fs-h1: 32px; --fs-h2: 28px; --fs-h3: 24px; --fs-h4: 20px; --fs-h5: 18px; --fs-h6: 16px; --fs-p: 14px;
  --hdr-pt: 10px; --hdr-pb: 10px; --hdr-pl: 10px; --hdr-pr: 10px;
  --bnr-h: 400px; --bnr-pt: 150px; --bnr-pb: 40px; --bnr-pl: 20px; --bnr-pr: 20px;
  --sec-pt: 24px; --sec-pb: 24px; --sec-pl: 20px; --sec-pr: 20px;
  --sec2-pt: 50px; --sec2-pb: 50px; --sec2-pl: 16px; --sec2-pr: 16px;
  --ftr-pt: 40px; --ftr-pb: 20px; --ftr-pl: 20px; --ftr-pr: 20px;
} }
@media (max-width: 393px) { :root {
  --fs-h1: 30px; --fs-h2: 26px; --fs-h3: 22px; --fs-h4: 20px; --fs-h5: 18px; --fs-h6: 16px; --fs-p: 14px;
  --hdr-pt: 10px; --hdr-pb: 10px; --hdr-pl: 10px; --hdr-pr: 10px;
  --bnr-h: 400px; --bnr-pt: 120px; --bnr-pb: 40px; --bnr-pl: 16px; --bnr-pr: 16px;
  --sec-pt: 24px; --sec-pb: 24px; --sec-pl: 20px; --sec-pr: 20px;
  --sec2-pt: 50px; --sec2-pb: 50px; --sec2-pl: 16px; --sec2-pr: 16px;
  --ftr-pt: 40px; --ftr-pb: 20px; --ftr-pl: 20px; --ftr-pr: 20px;
} }

/* Typography apply */
body { font-family: var(--font-primary); color: var(--color-black); font-size: var(--fs-p); background-color: var(--color-bg-2); }

/* Text selection — site brand gold instead of the browser default blue. */
::selection { background: var(--color-secondary); color: var(--color-white); }
::-moz-selection { background: var(--color-secondary); color: var(--color-white); }
/* Images/icons never join a text selection, so the gold selection tint can't wash over them. */
img { -webkit-user-select: none; user-select: none; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { font-family: var(--font-primary); color: var(--color-black); line-height: 1.15; font-weight: 700; }
h1,.h1 { font-size: var(--fs-h1); }
h2,.h2 { font-size: var(--fs-h2); }
h3,.h3 { font-size: var(--fs-h3); }
h4,.h4 { font-size: var(--fs-h4); }
h5,.h5 { font-size: var(--fs-h5); }
h6,.h6 { font-size: var(--fs-h6); }
p,.p { font-size: var(--fs-p); line-height: 1.6; }

/* Color utilities */
.bg-primary { background-color: var(--color-primary); color: var(--color-white); }
.bg-secondary { background-color: var(--color-secondary); color: var(--color-white); }
.bg-ancient { background-color: var(--color-ancient); color: var(--color-black); }
.bg-1 { background-color: var(--color-bg-1); }
.bg-2 { background-color: var(--color-bg-2); }
.bg-3 { background-color: var(--color-bg-3); }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-white { color: var(--color-white); }
.text-black { color: var(--color-black); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-primary); font-weight: 600; font-size: var(--fs-p); line-height: 1; padding: 16px 32px; border-radius: 6px; border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.btn-primary { background-color: var(--color-ancient); color: var(--color-black); border-color: var(--color-ancient); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }
.btn-outline { background-color: var(--color-white); color: var(--color-black); border-color: var(--color-ancient); }
.btn-outline:hover, .btn-outline:focus { background-color: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }
.btn-link { background: transparent; border: none; padding-left: 0; padding-right: 0; color: var(--color-black); }
.btn-link:hover, .btn-link:focus { color: var(--color-secondary); text-decoration: underline; }

/* Spacing apply (top right bottom left) */
/* .site-header padding is applied on .site-header__inner (main.css) to avoid doubling. */
.banner { min-height: var(--bnr-h); padding: var(--bnr-pt) var(--bnr-pr) var(--bnr-pb) var(--bnr-pl); box-sizing: border-box; }
.section { padding: var(--sec-pt) var(--sec-pr) var(--sec-pb) var(--sec-pl); }
.second-section, .section--secondary { padding: var(--sec2-pt) var(--sec2-pr) var(--sec2-pb) var(--sec2-pl); }
/* .site-footer padding is applied on .site-footer__top / __bar (main.css) to avoid doubling. */