/* ============================================================
   MB LANDSCAPING — Design tokens (single source)
   Merged from colors, typography, layout, fonts, base.
   Brand changes = one-line edits here.
   ============================================================ */

/* ============================================================
   MB LANDSCAPING — Webfonts
   The production app ships in DM Sans (loaded from Google Fonts).
   DM Sans is the system font for all UI, headings and body.
   The wordmark artwork (assets/logo-wordmark*.svg) is a separate
   geometric display lockup and is used as an image, not webfont.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ============================================================
   MB LANDSCAPING — Color tokens
   Brand greens (leaf), barks (brown), warm stone neutrals,
   plus grounded semantic accents (clay, brick, sky, amber).
   ============================================================ */
:root {
  /* ---- Leaf green (primary) — base 500 = brand #6B9E3E (real app green) ---- */
  --leaf-50:  #f1f6ea;
  --leaf-100: #dcebca;
  --leaf-200: #c1dba0;
  --leaf-300: #a3c674;
  --leaf-400: #86b050;
  --leaf-500: #6B9E3E;
  --leaf-600: #557e30;
  --leaf-700: #426226;
  --leaf-800: #364f20;
  --leaf-900: #2c401c;

  /* ---- Bark (brown / charcoal) — base 500 = brand #453535 ---- */
  --bark-50:  #f6f3f2;
  --bark-100: #e8e1df;
  --bark-200: #cabfbc;
  --bark-300: #a89894;
  --bark-400: #735f5b;
  --bark-500: #453535;
  --bark-600: #3a2c2c;
  --bark-700: #2d2222;
  --bark-800: #211919;
  --bark-900: #161010;

  /* ---- Stone (warm neutral) ---- */
  --stone-50:  #faf9f6;
  --stone-100: #f3f1ec;
  --stone-200: #e7e3d9;
  --stone-300: #d6d0c2;
  --stone-400: #b3aa98;
  --stone-500: #8c8373;
  --stone-600: #6b6356;
  --stone-700: #4f4940;
  --stone-800: #36322c;
  --stone-900: #211e1a;

  --white: #ffffff;
  --black: #161010;

  /* ---- Semantic accents (grounded, earthy) ---- */
  --clay-500:  #c47a4a;  /* terracotta / secondary warm accent */
  --clay-600:  #a8623a;
  --brick-500: #bf3b2e;  /* danger (app value) */
  --brick-600: #9a3525;
  --amber-500: #d4821a;  /* warning (app value) */
  --amber-600: #b87d1c;
  --sky-500:   #2471a3;  /* info / water (app value) */
  --sky-600:   #305f7c;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components, not raw scale
     ============================================================ */
  /* Brand */
  --brand:            var(--leaf-500);
  --brand-strong:     var(--leaf-600);
  --brand-deep:       var(--leaf-800);
  --brand-tint:       var(--leaf-100);
  --brand-wash:       var(--leaf-50);

  /* Surfaces */
  --surface-page:     var(--stone-100);
  --surface-card:     var(--white);
  --surface-raised:   var(--white);
  --surface-sunken:   var(--stone-200);
  --surface-inverse:  var(--bark-500);
  --surface-brand:    var(--leaf-500);

  /* Text */
  --text-strong:      var(--bark-500);
  --text-body:        var(--bark-600);
  --text-muted:       var(--stone-600);
  --text-faint:       var(--stone-500);
  --text-on-brand:    var(--white);
  --text-on-inverse:  var(--stone-100);
  --text-link:        var(--leaf-700);

  /* Borders & lines */
  --border-subtle:    var(--stone-200);
  --border-default:   var(--stone-300);
  --border-strong:    var(--bark-300);
  --border-brand:     var(--leaf-500);

  /* Feedback */
  --success:          var(--leaf-600);
  --success-tint:     var(--leaf-50);
  --warning:          var(--amber-500);
  --warning-tint:     #fbf2dc;
  --danger:           var(--brick-500);
  --danger-tint:      #f7e6e2;
  --info:             var(--sky-500);
  --info-tint:        #e3eef4;

  /* Focus ring */
  --focus-ring:       color-mix(in oklab, var(--leaf-500) 55%, transparent);
}

/* ============================================================
   MB LANDSCAPING — Typography tokens
   Display: Jost (geometric, echoes the wordmark)
   Text/UI: Hanken Grotesk (humanist grotesque)
   Mono:    IBM Plex Mono (specs, measurements, data)
   ============================================================ */
:root {
  /* Families — production app uses DM Sans throughout */
  --font-display: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-sans:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* Type scale (1.250 major-third, 16px base) */
  --text-2xs:  0.6875rem;  /* 11px */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.375rem;   /* 22px */
  --text-xl:   1.75rem;    /* 28px */
  --text-2xl:  2.25rem;    /* 36px */
  --text-3xl:  2.875rem;   /* 46px */
  --text-4xl:  3.75rem;    /* 60px */
  --text-5xl:  4.75rem;    /* 76px */

  /* Line heights */
  --leading-tight:   1.05;
  --leading-snug:    1.18;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tighter: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;   /* eyebrows / wordmark feel */
  --tracking-widest:  0.22em;   /* LANDSCAPING lockup spacing */

  /* ---- Semantic roles ---- */
  --display-font:   var(--font-display);
  --heading-font:   var(--font-display);
  --body-font:      var(--font-sans);
  --eyebrow-font:   var(--font-sans);
}

/* ============================================================
   MB LANDSCAPING — Spacing, radius, shadow, layout tokens
   4px base grid. Sturdy radii, soft earthy shadows.
   ============================================================ */
:root {
  /* Spacing (4px base) */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4 */
  --space-2:   0.5rem;   /* 8 */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   2.5rem;   /* 40 */
  --space-8:   3rem;     /* 48 */
  --space-9:   4rem;     /* 64 */
  --space-10:  5rem;     /* 80 */
  --space-11:  6rem;     /* 96 */
  --space-12:  8rem;     /* 128 */

  /* Radius — sturdy, slightly softened (civil/commercial feel) */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  34px;
  --radius-card: 14px; /* @kind radius */  /* matches app card radius */
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Border widths */
  --border-hair:  1px;
  --border-thin:  1.5px;
  --border-thick: 2px;
  --border-heavy: 3px;

  /* Shadows — low, warm, grounded (tinted with bark) */
  --shadow-xs:  0 1px 2px rgba(22, 16, 16, 0.06);
  --shadow-sm:  0 2px 6px rgba(22, 16, 16, 0.07);
  --shadow-md:  0 6px 18px rgba(22, 16, 16, 0.09);
  --shadow-lg:  0 16px 40px rgba(22, 16, 16, 0.12);
  --shadow-xl:  0 28px 64px rgba(22, 16, 16, 0.16);
  --shadow-inset: inset 0 1px 2px rgba(22, 16, 16, 0.06);

  /* Layout */
  --container-sm:  640px;
  --container-md:  860px;
  --container-lg:  1100px;
  --container-xl:  1320px;
  --gutter:        clamp(1.25rem, 4vw, 4rem); /* @kind spacing */

  /* Motion */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   400ms; /* @kind other */
}

/* ============================================================
   MB LANDSCAPING — Base element styles
   Light reset + sensible brand defaults bound to tokens.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--body-font);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--heading-font);
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

p { text-wrap: pretty; }

a {
  color: var(--text-link);
  text-decoration: none;
}
a:hover { text-decoration: underline; text-underline-offset: 2px; }

img, svg { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--leaf-200); color: var(--bark-700); }

/* Eyebrow / kicker — the brand's signature letterspaced label */
.mb-eyebrow {
  font-family: var(--eyebrow-font);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  color: var(--brand-strong);
}

/* Focus visibility */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}