/* ============================================================
   EVERTS. ONDERHOUD & RENOVATIE — Foundations
   Colors + Type tokens. Import this in any Everts artifact.
   Fonts: Montserrat (headings/nav/buttons) is self-hosted from
   /fonts (brand files supplied by Everts). Inter (body) is loaded
   from Google Fonts CDN — both ARE the brand fonts, not substitutes.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@font-face { font-family: 'Montserrat'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/Montserrat-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/Montserrat-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/Montserrat-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/Montserrat-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-weight: 800; font-style: normal; font-display: swap; src: url('fonts/Montserrat-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-weight: 900; font-style: normal; font-display: swap; src: url('fonts/Montserrat-Black.ttf') format('truetype'); }

:root {
  /* ---------- BRAND COLORS ---------- */
  /* Wordmark / logo green — the deepest, most "Everts" green.
     Use for logo, on-light headings, and brand accents on white. */
  --everts-logo-green: #0b7a35;

  /* Primary green — UI chrome, primary buttons, active states,
     links, focus. Brighter and more energetic than the logo green. */
  --everts-green: #3daa35;
  --everts-green-600: #319029;   /* hover (darker) */
  --everts-green-700: #277821;   /* press */
  --everts-green-100: #e7f4e3;   /* tint fill / chips */
  --everts-green-50:  #f3f9f1;   /* faint wash */

  /* Dark green — deep brand tone for headers, footers, dark sections,
     and as the base of the low-poly background gradient. */
  --everts-dark-green: #154e2f;
  --everts-dark-green-800: #103d25;

  /* Lime accent — the chartreuse highlight from the low-poly
     background. Sparing use only: decorative highlights, never text. */
  --everts-lime: #8dbc22;

  /* Semantic SUCCESS — intentionally distinct from brand green so
     "it worked" never reads as "this is the brand". */
  --success: #10b981;
  --success-bg: #ecfdf5;
  --warning: #d97706;
  --warning-bg: #fffbeb;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --info: #2563eb;
  --info-bg: #eff6ff;

  /* ---------- NEUTRALS ---------- */
  --ink-900: #14201a;   /* near-black, slightly green-warm */
  --ink-700: #34433b;   /* primary body text */
  --ink-500: #5d6b63;   /* secondary text */
  --ink-400: #8a958d;   /* tertiary / placeholder */
  --line-200: #e2e7e3;  /* borders, dividers */
  --line-100: #eef1ee;  /* subtle hairlines */
  --surface-100: #f6f8f6; /* page wash */
  --surface-0: #ffffff;   /* cards / panels */

  /* ---------- FOREGROUND ROLES ---------- */
  --fg1: var(--ink-900);  /* headings */
  --fg2: var(--ink-700);  /* body */
  --fg3: var(--ink-500);  /* secondary */
  --fg4: var(--ink-400);  /* tertiary */
  --bg1: var(--surface-0);
  --bg2: var(--surface-100);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Montserrat', system-ui, sans-serif;  /* headings, nav, buttons */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Roboto Mono', monospace;

  /* ---------- TYPE SCALE (1.25 major third) ---------- */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.375rem;   /* 22px */
  --text-2xl: 1.75rem;   /* 28px */
  --text-3xl: 2.25rem;   /* 36px */
  --text-4xl: 3rem;      /* 48px */
  --text-5xl: 3.75rem;   /* 60px */

  /* ---------- RADII ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;   /* default for buttons, inputs */
  --radius-lg: 16px;   /* cards */
  --radius-xl: 24px;   /* large feature panels */
  --radius-full: 999px;

  /* ---------- SHADOWS (soft, low-contrast, never heavy) ---------- */
  --shadow-sm: 0 1px 2px rgba(20, 32, 26, 0.06);
  --shadow-md: 0 4px 16px rgba(20, 32, 26, 0.08);
  --shadow-lg: 0 12px 32px rgba(20, 32, 26, 0.12);
  --shadow-focus: 0 0 0 3px rgba(61, 170, 53, 0.30);

  /* ---------- SPACING (4px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* ---------- LOW-POLY BACKGROUND ---------- */
  /* Reserve for hero / login / cover surfaces ONLY — never as
     dashboard UI chrome. Use the supplied image asset; the CSS
     gradient below is a fallback when the image isn't available. */
  --everts-poly-fallback: linear-gradient(135deg, #154e2f 0%, #2e8b3a 45%, #6cb12d 75%, #8dbc22 100%);
}

/* ============================================================
   SEMANTIC TYPE PRIMITIVES
   Apply these classes (or copy the rules) for consistent type.
   ============================================================ */

.everts-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-4xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fg1);
  text-wrap: balance;
}
.everts-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--fg1);
  text-wrap: balance;
}
.everts-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg1);
}
.everts-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.3;
  color: var(--fg1);
}
.everts-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--everts-green);
}
.everts-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: 1.5;
  color: var(--fg2);
  text-wrap: pretty;
}
.everts-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--fg2);
  text-wrap: pretty;
}
.everts-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg3);
}
.everts-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  color: var(--fg2);
}