/* Raphael's Landscapes — Colors + Type Foundations
   Source: raphaelslandscapes.com (Astra theme + Elementor) */

/* Self-hosted fonts (U2 2026-08-07) — replaces the Google Fonts @import.
   Cuts grep-derived from actual kit usage: Bricolage Grotesque 600+700 (700 = BuildLayers SVG R stamp),
   Karla 400/500/600/700; latin + latin-ext. Files live in /assets/fonts/. */
/* Bricolage Grotesque 600 — latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Bricolage Grotesque 600 — latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Bricolage Grotesque 700 — latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Bricolage Grotesque 700 — latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Karla 400 — latin-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/karla-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Karla 400 — latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/karla-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Karla 500 — latin-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/karla-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Karla 500 — latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/karla-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Karla 600 — latin-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/karla-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Karla 600 — latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/karla-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Karla 700 — latin-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/karla-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Karla 700 — latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/karla-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* === BRAND COLORS === */
  --rl-yellow:        #ebd35b;  /* primary accent - golden yellow */
  --rl-yellow-deep:   #e3bd2c;  /* hover state - darker mustard */
  --rl-green-deep:    #183030;  /* primary text + dark backgrounds - near black evergreen */
  --rl-green-muted:   #526354;  /* body text - sage/olive */
  --rl-cream:         #f3faf6;  /* page background - off-white with cool tint */
  --rl-white:         #ffffff;
  --rl-stone:         #dfe2e2;  /* borders, dividers */
  --rl-ink:           #111111;  /* deepest text on light */

  /* Suggested extensions (for redesign — derived, harmonious) */
  --rl-leaf:          #3d5a3d;  /* mid green for icons / decorative */
  --rl-moss:          #6b7d6b;  /* lighter sage */
  --rl-sand:          #f5ecd0;  /* warm cream alt for sections */
  --rl-shadow:        rgba(24, 48, 48, 0.12);
  --rl-shadow-strong: rgba(24, 48, 48, 0.24);

  /* === SEMANTIC === */
  --fg-1:        var(--rl-green-deep);   /* headings, primary text */
  --fg-2:        var(--rl-green-muted);  /* body text */
  --fg-3:        var(--rl-moss);         /* tertiary / captions */
  --fg-on-dark:  var(--rl-cream);
  --fg-on-yellow: var(--rl-green-deep);

  --bg-page:     var(--rl-cream);
  --bg-surface:  var(--rl-white);
  --bg-dark:     var(--rl-green-deep);
  --bg-accent:   var(--rl-yellow);

  --border-1:    var(--rl-stone);
  --border-dark: rgba(24, 48, 48, 0.18);

  /* === TYPE === */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;  /* headings */
  --font-body:    'Karla', system-ui, sans-serif;                /* body + UI */

  /* Type scale (desktop) — derived from astra inline css */
  --t-h1:   4.625rem;  /* 74px */
  --t-h2:   3.375rem;  /* 54px */
  --t-h3:   2.625rem;  /* 42px */
  --t-h4:   2rem;      /* 32px */
  --t-h5:   1.5rem;    /* 24px */
  --t-h6:   1.125rem;  /* 18px */
  --t-body: 1rem;      /* 16px */
  --t-sm:   0.875rem;
  --t-xs:   0.75rem;
  --t-eyebrow: 0.875rem;

  /* === SPACING === */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* === RADII === */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 9999px;  /* buttons are pill-shaped */

  /* === SHADOWS === */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px -2px rgba(24,48,48,0.12);
  --shadow-lg: 0 16px 32px -8px rgba(24,48,48,0.18);
  --shadow-style-guide: 0px 0px 4px 0 #00000057;

  /* === MOTION === */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-med: 320ms;
  --dur-slow: 600ms;
}

/* === BASE === */
html, body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-2);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: 1.1; letter-spacing: -2px; }
h2 { font-size: var(--t-h2); line-height: 1.2; letter-spacing: -2px; }
h3 { font-size: var(--t-h3); line-height: 1.3; letter-spacing: -1px; }
h4 { font-size: var(--t-h4); line-height: 1.2; }
h5 { font-size: var(--t-h5); line-height: 1.2; }
h6 { font-size: var(--t-h6); line-height: 1.25; }

p { margin: 0 0 1em 0; text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-1);
}

/* === BUTTON SYSTEM === */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -0.5px;
  padding: 13px 30px;
  border-radius: var(--r-pill);
  border: 2px solid var(--rl-yellow);
  background: var(--rl-yellow);
  color: var(--rl-green-deep);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--rl-yellow-deep); border-color: var(--rl-yellow-deep); }
.btn:active { transform: translateY(1px); }
.btn--outline {
  background: transparent;
  color: var(--rl-yellow);
}
.btn--outline:hover { background: var(--rl-yellow-deep); border-color: var(--rl-yellow-deep); color: var(--rl-green-deep); }
.btn--dark {
  background: var(--rl-green-deep); border-color: var(--rl-green-deep); color: var(--rl-cream);
}
.btn--dark:hover { background: #0d1d1d; border-color: #0d1d1d; }

/* === RESPONSIVE TYPE === */
@media (max-width: 921px) {
  :root {
    --t-h1: 3rem;
    --t-h2: 2rem;
    --t-h3: 1.625rem;
    --t-h4: 1.375rem;
    --t-h5: 1.25rem;
    --t-h6: 1rem;
  }
}