/* Reclaim Construction — tokens (fonts via Google Fonts) */

/* ============================================================
   Reclaim Construction — Color tokens
   A light-theme system: a near-black "Reclaim Black" on warm
   white, anchored by a deep slate-blue (Jelly Bean) primary,
   with Jaffa (orange) and Mantis (green) as supporting accents.
   ============================================================ */

:root {
  /* ---- Neutrals: shade-0 (darkest) → white (lightest) ----- */
  --color-white: #ffffff;
  --color-neutral-lightest: #f2f2f2;
  --color-neutral-lighter: #d9dad9;
  --color-neutral-light: #b4b5b4;
  --color-neutral: #828482;
  --color-neutral-dark: #505350;
  --color-neutral-darker: #1e221e;
  --color-neutral-darkest: #060a05; /* "Reclaim Black" */

  /* ---- Jelly Bean (primary — deep slate blue) ------------- */
  --color-jelly-bean-lightest: #e9f0f5;
  --color-jelly-bean-lighter: #d4e2ec;
  --color-jelly-bean-light: #6b99bf;
  --color-jelly-bean: #2c6ea4; /* primary action */
  --color-jelly-bean-dark: #235883; /* primary hover  */
  --color-jelly-bean-darker: #112c41; /* dark surface   */
  --color-jelly-bean-darkest: #0d2131; /* darkest surface*/

  /* ---- Jaffa (accent — warm orange) ----------------------- */
  --color-jaffa-lightest: #fcf2eb;
  --color-jaffa-lighter: #fae5d8;
  --color-jaffa-light: #efa577;
  --color-jaffa: #e97f3e;
  --color-jaffa-dark: #ba6531;
  --color-jaffa-darker: #5d3218;
  --color-jaffa-darkest: #452612;

  /* ---- Mantis (accent — fresh green) ---------------------- */
  --color-mantis-lightest: #f1f8f0;
  --color-mantis-lighter: #e4f2e1;
  --color-mantis-light: #a2d296;
  --color-mantis: #7bbf6a;
  --color-mantis-dark: #629854;
  --color-mantis-darker: #314c2a;
  --color-mantis-darkest: #24391f;

  /* ---- Alpha ramps (overlays, borders, scrims) ------------ */
  --color-white-5: color-mix(in srgb, var(--color-white), transparent 95%);
  --color-white-10: color-mix(in srgb, var(--color-white), transparent 90%);
  --color-white-15: color-mix(in srgb, var(--color-white), transparent 85%);
  --color-white-20: color-mix(in srgb, var(--color-white), transparent 80%);
  --color-white-30: color-mix(in srgb, var(--color-white), transparent 70%);
  --color-white-40: color-mix(in srgb, var(--color-white), transparent 60%);
  --color-white-50: color-mix(in srgb, var(--color-white), transparent 50%);
  --color-white-60: color-mix(in srgb, var(--color-white), transparent 40%);
  --color-black-5: color-mix(in srgb, var(--color-neutral-darkest), transparent 95%);
  --color-black-10: color-mix(in srgb, var(--color-neutral-darkest), transparent 90%);
  --color-black-15: color-mix(in srgb, var(--color-neutral-darkest), transparent 85%);
  --color-black-20: color-mix(in srgb, var(--color-neutral-darkest), transparent 80%);
  --color-black-30: color-mix(in srgb, var(--color-neutral-darkest), transparent 70%);
  --color-black-40: color-mix(in srgb, var(--color-neutral-darkest), transparent 60%);
  --color-black-50: color-mix(in srgb, var(--color-neutral-darkest), transparent 50%);
  --color-black-60: color-mix(in srgb, var(--color-neutral-darkest), transparent 40%);

  /* ---- Semantic aliases (default = light surface) --------- */
  --text-primary: var(--color-neutral-darkest);
  --text-muted: var(--color-neutral-dark);
  --text-on-dark: var(--color-white);
  --surface-page: var(--color-white);
  --surface-raised: var(--color-neutral-lightest);
  --surface-dark: var(--color-jelly-bean-darkest);
  --border-subtle: var(--color-black-15);
  --accent: var(--color-jelly-bean);
  --accent-hover: var(--color-jelly-bean-dark);
  --scrim: var(--color-black-50); /* image overlay 50% */
}


/* ============================================================
   Reclaim Construction — Typography tokens
   Headings: Sora 500 (tight, slightly negative tracking).
   Body & UI: Inter 400.
   Scale values are the DESKTOP scale (≥992px). Mobile sizes
   are noted in guidelines; designs are authored at desktop.
   ============================================================ */

:root {
  /* ---- Families ------------------------------------------- */
  --font-heading: "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* ---- Weights -------------------------------------------- */
  --font-weight-regular: 400;
  --font-weight-medium: 500; /* heading default */
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ---- Type scale (desktop) ------------------------------- */
  --text-h1: 5.25rem; /* 84px */
  --text-h1-line: 1.1;
  --text-h1-tracking: -0.01em;

  --text-h2: 3.75rem; /* 60px */
  --text-h2-line: 1.2;
  --text-h2-tracking: -0.01em;

  --text-h3: 3rem; /* 48px */
  --text-h3-line: 1.2;
  --text-h3-tracking: -0.01em;

  --text-h4: 2.5rem; /* 40px */
  --text-h4-line: 1.3;
  --text-h4-tracking: -0.01em;

  --text-h5: 2rem; /* 32px */
  --text-h5-line: 1.3;
  --text-h5-tracking: -0.01em;

  --text-h6: 1.625rem; /* 26px */
  --text-h6-line: 1.4;
  --text-h6-tracking: -0.01em;

  --text-large: 1.625rem; /* 26px */
  --text-large-line: 1.5;

  --text-medium: 1.25rem; /* 20px */
  --text-medium-line: 1.5;

  --text-regular: 1.125rem; /* 18px */
  --text-regular-line: 1.5;

  --text-small: 1rem; /* 16px */
  --text-small-line: 1.5;

  --text-tiny: 0.75rem; /* 12px */
  --text-tiny-line: 1.5;
}

/* ---- Base element defaults (opt-in via these elements) ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.01em;
}

body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
}

/* ---- Utility classes for specimen / quick use ------------- */
.font-heading { font-family: var(--font-heading); }
.font-body { font-family: var(--font-body); }


/* ============================================================
   Reclaim Construction — Spacing, radii, containers, elevation
   ============================================================ */

:root {
  /* ---- Radii ---------------------------------------------- */
  --radius-button: 6.25rem; /* 100px — full pill */
  --radius-badge: 6.25rem; /* 100px — full pill */
  --radius-card: 0.5rem; /* 8px  */
  --radius-image: 0.5rem; /* 8px  */
  --radius-input: 0.75rem; /* 12px */
  --radius-checkbox: 0.25rem; /* 4px  */

  /* ---- Spacing scale (4px base) --------------------------- */
  --space-1: 0.25rem; /* 4px  */
  --space-2: 0.5rem; /* 8px  */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-18: 4.5rem; /* 72px */
  --space-20: 5rem; /* 80px */
  --space-28: 7rem; /* 112px */
  --space-30: 7.5rem; /* 120px */

  /* ---- Section rhythm ------------------------------------- */
  --section-pad-y: 7rem; /* desktop vertical section padding */
  --section-pad-x: 5%; /* horizontal gutter */

  /* ---- Container widths ----------------------------------- */
  --container-sm: 30rem; /* 480px */
  --container-md: 35rem; /* 560px */
  --container-lg: 48rem; /* 768px */
  --container-xl: 64rem; /* 1024px */
  --container-xxl: 80rem; /* 1280px — page max-width */

  /* ---- Breakpoints (reference) ---------------------------- */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;

  /* ---- Elevation ------------------------------------------
     The brand leans flat: borders + scrims do the work rather
     than drop shadows. These soft shadows are for overlays
     (dropdowns, dialogs, popovers) only.                     */
  --shadow-sm: 0 1px 2px rgba(6, 10, 5, 0.06);
  --shadow-md: 0 6px 16px rgba(6, 10, 5, 0.1);
  --shadow-lg: 0 16px 40px rgba(6, 10, 5, 0.16);
}

/* ---- Container helper ------------------------------------- */
.container {
  margin-inline: auto;
  max-width: var(--container-xxl);
}


/* ============================================================
   Reclaim Construction — Color schemes
   Sections opt into one of four schemes. Each sets the local
   surface, text, foreground (cards), border and accent so any
   nested component inherits the correct contrast automatically.

   scheme-1  Dark      — deep slate, white text   (hero, navbar)
   scheme-2  Light     — white, near-black text   (default body)
   scheme-3  Stone     — warm grey, near-black     (alt sections)
   scheme-4  Slate     — dark blue, white text     (feature blocks)
   ============================================================ */

.scheme-1,
.scheme-2,
.scheme-3,
.scheme-4 {
  background-color: var(--scheme-background);
  color: var(--scheme-text);
}

.scheme-1 {
  --scheme-background: var(--color-jelly-bean-darkest);
  --scheme-foreground: var(--color-jelly-bean-darker);
  --scheme-text: var(--color-white);
  --scheme-border: var(--color-white-20);
  --scheme-accent: var(--color-white);
  --scheme-btn-text: var(--color-white);
}

.scheme-2 {
  --scheme-background: var(--color-white);
  --scheme-foreground: var(--color-neutral-lightest);
  --scheme-text: var(--color-neutral-darkest);
  --scheme-border: var(--color-black-15);
  --scheme-accent: var(--color-jelly-bean);
  --scheme-btn-text: var(--color-white);
}

.scheme-3 {
  --scheme-background: var(--color-neutral-lighter);
  --scheme-foreground: var(--color-neutral-lightest);
  --scheme-text: var(--color-neutral-darkest);
  --scheme-border: var(--color-black-15);
  --scheme-accent: var(--color-jelly-bean);
  --scheme-btn-text: var(--color-white);
}

.scheme-4 {
  --scheme-background: var(--color-jelly-bean-darker);
  --scheme-foreground: var(--color-jelly-bean-darkest);
  --scheme-text: var(--color-white);
  --scheme-border: var(--color-white-20);
  --scheme-accent: var(--color-white);
  --scheme-btn-text: var(--color-white);
}