/* Malstone Developments - design tokens
   Consolidated from the design-system export in _ds/ (colors, typography,
   spacing) into one file so pages load a single stylesheet with no @import
   waterfall. Edit values here. */

/* ---------- Fonts ----------
   Montserrat ships as a variable font from Google Fonts - one file
   covers the whole 400-800 weight range used on this site, so a
   single @font-face with a weight range replaces four separate
   declarations (two of which, 700/800, were 404ing: stale file
   hashes from an earlier Montserrat release meant every bold/black
   heading on the site was silently falling back to Arial). */
@font-face{font-family:"Montserrat";src:url("../assets/fonts/montserrat-var.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap;}
@font-face{font-family:"Poppins";src:url("../assets/fonts/poppins-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Poppins";src:url("../assets/fonts/poppins-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Poppins";src:url("../assets/fonts/poppins-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}

:root{
  color-scheme:light;
  /* ---------- Palette ---------- */
  --green-900:#132e28;
  --green-800:#1c4138;
  --green-700:#26564a;
  --green-100:#e3eae7;
  --gold-600:#a06c37;
  --gold-500:#a06c37;
  --gold-300:#d3a878;
  --gold-100:#f3e4d3;
  --brown-700:#5a4a45;
  --ink-900:#211f1d;
  --ink-800:#211f1d;
  --white:#ffffff;
  --offwhite-100:#f1f0ef;
  --offwhite-200:#e7e5e3;
  --line-200:#dcdad7;

  /* ---------- Semantic colour roles ---------- */
  --color-primary:var(--green-800);
  --color-primary-hover:var(--green-900);
  --color-accent:var(--gold-500);
  --color-accent-hover:var(--gold-300);
  /* AA-safe companions: dark text on the fill is 5.4:1, text-gold on white is 5.2:1 */
  --color-accent-fill:#bd8955;
  --color-on-primary:var(--white);
  --badge-green-text:var(--green-900);
  --badge-gold-text:#7a4f25;
  --color-accent-text:#946230;
  --color-surface-glass:rgba(255,255,255,.92);
  --color-ink:var(--ink-800);
  --color-text-heading:var(--brown-700);
  --color-text-body:var(--ink-800);
  --color-text-muted:#6b6763;
  --color-text-on-dark:var(--white);
  --color-text-on-dark-muted:#c9d3cf;
  --color-surface:var(--white);
  --color-surface-sunken:var(--offwhite-100);
  --color-surface-dark:var(--green-800);
  --color-border:var(--line-200);
  --color-border-on-dark:rgba(255,255,255,.22);
  --color-focus-ring:var(--gold-500);

  /* ---------- Typography ---------- */
  --font-display:"Montserrat",Arial,sans-serif;
  --font-body:"Poppins","Segoe UI",Arial,sans-serif;

  --tracking-wide:0.08em;
  --tracking-wider:0.16em;

  --text-eyebrow:600 12px/1.4 var(--font-body);
  --text-h1:700 clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem)/1.15 var(--font-display);
  --text-h2:700 clamp(1.5rem, 1.15rem + 1.4vw, 2rem)/1.18 var(--font-display);
  --text-h3:700 24px/1.25 var(--font-display);
  --text-h4:700 18px/1.3 var(--font-display);
  --text-body-lg:400 18px/1.6 var(--font-body);
  --text-body:400 16px/1.6 var(--font-body);
  --text-body-sm:400 14px/1.55 var(--font-body);
  --text-label:600 13px/1.4 var(--font-body);
  --text-button:600 15px/1 var(--font-body);

  /* ---------- Spacing, radii, elevation ---------- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;

  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:14px;
  --radius-pill:999px;

  --shadow-sm:0 1px 2px rgba(19,46,40,.08);
  --shadow-md:0 6px 20px rgba(19,46,40,.10);
  --shadow-lg:0 16px 40px rgba(19,46,40,.14);

  --container-max:1200px;
  --gutter:48px;
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --duration-fast:150ms;
  --duration-standard:220ms;
  --duration-reveal:360ms;
  --duration-page-transition:300ms;
  --blur-nav:8px;
}

/* ---------- Dark theme ----------
   Follows the system setting unless the visitor has chosen a theme with
   the nav toggle (js/theme-toggle.js sets data-theme on <html>). The two
   blocks below hold the same values; keep them in sync. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --green-100:#1d2e29;
    --gold-100:#3a2c1f;
    --color-primary:#8fc4b0;
    --color-primary-hover:#b4dccd;
    --color-on-primary:#0f1715;
    --color-accent-text:#d3a878;
    --color-surface-glass:rgba(15,23,21,.92);
    --color-text-heading:#e8ddd5;
    --color-text-body:#e4e3e1;
    --color-text-muted:#a3aeaa;
    --color-surface:#0f1715;
    --color-surface-sunken:#16211e;
    --color-border:#2a3a35;
    --color-focus-ring:#d3a878;
    --badge-green-text:#bfe0d3;
    --badge-gold-text:#e2bf93;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 6px 20px rgba(0,0,0,.45);
    --shadow-lg:0 16px 40px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --green-100:#1d2e29;
  --gold-100:#3a2c1f;
  --color-primary:#8fc4b0;
  --color-primary-hover:#b4dccd;
  --color-on-primary:#0f1715;
  --color-accent-text:#d3a878;
  --color-surface-glass:rgba(15,23,21,.92);
  --color-text-heading:#e8ddd5;
  --color-text-body:#e4e3e1;
  --color-text-muted:#a3aeaa;
  --color-surface:#0f1715;
  --color-surface-sunken:#16211e;
  --color-border:#2a3a35;
  --color-focus-ring:#d3a878;
  --badge-green-text:#bfe0d3;
  --badge-gold-text:#e2bf93;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 6px 20px rgba(0,0,0,.45);
  --shadow-lg:0 16px 40px rgba(0,0,0,.5);
}