/* ============================================================
   NorthMin — Design Tokens
   Single source of truth for colour, type, spacing, and the
   core button + card components. Drop this file into any
   NorthMin web project and reference the variables below.
   ============================================================ */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Unbounded:wght@200..900&display=swap');

:root{
  /* ---------- Colour: core ---------- */
  --nm-green:        #22895F;   /* primary brand */
  --nm-green-tint:   #DEEDE7;
  --nm-green-soft:   #7AB89F;
  --nm-green-deep:   #1A6747;
  --nm-green-ink:    #114430;

  --nm-charcoal:     #264653;   /* secondary / dark surfaces */
  --nm-charcoal-soft:#7D9098;
  --nm-charcoal-deep:#1C343E;
  --nm-charcoal-ink: #13232A;

  --nm-orange:       #C0531E;   /* accent — display, sparing */
  --nm-orange-tint:  #F7EBE2;
  --nm-orange-soft:  #D89A6B;
  --nm-orange-deep:  #9C4416;   /* small white-on-orange UI */

  --nm-terracotta:     #B65A36;   /* earthy card-top accent */
  --nm-terracotta-deep:#8F4327;

  /* ---------- Colour: charts / illustration only ---------- */
  --nm-sun:          #E9C46A;
  --nm-sand:         #F4A261;

  /* ---------- Colour: neutrals & text ---------- */
  --nm-body:         #23272A;   /* default body copy */
  --nm-muted:        #5C6F72;
  --nm-surface:      #F7F3EC;   /* warm surface */
  --nm-white:        #FFFFFF;
  --nm-hairline:     #E4E0D7;

  /* ---------- Typography ---------- */
  --nm-font-heading: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --nm-font-eyebrow: "Unbounded", "Helvetica Neue", Arial, sans-serif;
  --nm-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Heading weight rule: Light at/above 30pt, Bold below 30pt (~40px). */
  --nm-weight-heading:      300;   /* DM Sans Light  — large display & section titles */
  --nm-weight-heading-bold: 700;   /* DM Sans Bold   — sub-heads under 30pt */

  /* type scale (fluid where useful) */
  --nm-fs-display:  clamp(3.12rem, 6vw, 4.8rem);   /* hero — +20% */
  --nm-fs-h1:       clamp(2rem, 3.5vw, 2.9rem);
  --nm-fs-h2:       clamp(1.5rem, 2.4vw, 2rem);
  --nm-fs-h3:       1.35rem;
  --nm-fs-body:     1.0625rem;   /* 17px */
  --nm-fs-small:    0.875rem;
  --nm-fs-eyebrow:  0.72rem;

  --nm-lh-tight: 1.12;
  --nm-lh-body:  1.6;
  --nm-tracking-eyebrow: 0.18em;

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

  /* ---------- Radii ---------- */
  /* NorthMin uses SHARP corners. Radius tokens kept for rare soft cases only. */
  --nm-radius-sharp: 0px;
  --nm-radius-soft:  4px;

  /* ---------- Elevation (depth) ---------- */
  --nm-shadow-sm: 0 1px 2px rgba(19,35,42,.10);
  --nm-shadow-md: 0 6px 16px rgba(19,35,42,.14);
  --nm-shadow-lg: 0 14px 34px rgba(19,35,42,.18);

  /* ---------- Motion ---------- */
  --nm-ease: cubic-bezier(.2,.7,.3,1);
  --nm-dur:  .18s;
}

/* ============================================================
   BUTTONS
   Sharp corners + depth: a subtle top-to-bottom shading gradient,
   a 1px highlight on the top edge, a darker grounding edge at the
   bottom, and a drop shadow that lifts the button off the page.
   Presses down on :active.
   ============================================================ */
.nm-btn{
  --_bg:    var(--nm-orange);          /* rust — primary button */
  --_bg2:   var(--nm-orange-deep);
  --_edge:  #6E3410;
  --_fg:    var(--nm-white);

  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--nm-font-eyebrow);
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1;
  color:var(--_fg);
  text-decoration:none;
  cursor:pointer;
  padding:14px 26px;
  border:0;
  border-radius:var(--nm-radius-sharp);     /* sharp corners */
  background:linear-gradient(180deg, var(--_bg) 0%, var(--_bg2) 100%);
  /* depth: top highlight (inset), grounding edge (inset), lift shadow */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 0 var(--_edge),
    0 4px 10px rgba(19,35,42,.22);
  transition: transform var(--nm-dur) var(--nm-ease),
              box-shadow var(--nm-dur) var(--nm-ease),
              filter var(--nm-dur) var(--nm-ease);
}
.nm-btn:hover{
  filter:brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -2px 0 var(--_edge),
    0 8px 18px rgba(19,35,42,.28);
  transform:translateY(-1px);
}
.nm-btn:active{
  transform:translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(19,35,42,.30),
    0 2px 5px rgba(19,35,42,.20);
}
.nm-btn:focus-visible{
  outline:3px solid var(--nm-orange);
  outline-offset:2px;
}

/* Variants */
.nm-btn--green{   /* secondary — Irish green */
  --_bg:var(--nm-green); --_bg2:var(--nm-green-deep); --_edge:var(--nm-green-ink);
}
.nm-btn--charcoal{
  --_bg:var(--nm-charcoal); --_bg2:var(--nm-charcoal-deep); --_edge:var(--nm-charcoal-ink);
}
.nm-btn--accent{   /* alias of the rust primary — kept for existing markup */
  --_bg:var(--nm-orange); --_bg2:var(--nm-orange-deep); --_edge:#6E3410;
}
.nm-btn--ghost{    /* outlined, still squared, lighter depth */
  --_fg:var(--nm-charcoal);
  background:var(--nm-white);
  border:1.5px solid var(--nm-charcoal);
  box-shadow: 0 2px 6px rgba(19,35,42,.10);
}
.nm-btn--ghost:hover{ background:var(--nm-surface); filter:none; }
.nm-btn--sm{ padding:9px 16px; font-size:.72rem; }
.nm-btn--lg{ padding:18px 34px; font-size:.9rem; }

/* ============================================================
   CARDS
   Squared corners, hairline border, soft lift shadow. Variants:
   plain, accent top-rule (the brand orange rule), dark, image.
   ============================================================ */
.nm-card{
  position:relative;
  background:var(--nm-white);
  border:1px solid var(--nm-body);   /* #23272A on every card */
  border-radius:var(--nm-radius-sharp);
  box-shadow:var(--nm-shadow-sm);
  padding:var(--nm-sp-6);
  overflow:hidden;
  transition:box-shadow var(--nm-dur) var(--nm-ease), transform var(--nm-dur) var(--nm-ease);
}
.nm-card:hover{ box-shadow:var(--nm-shadow-md); transform:translateY(-2px); }

.nm-card--surface{ background:var(--nm-surface); }
.nm-card--dark{
  background:var(--nm-charcoal); color:var(--nm-white);
}
.nm-card--dark .nm-card__eyebrow{ color:var(--nm-green-soft); }

/* Keep content above any background watermark/photo layers */
.nm-card > *{ position:relative; z-index:1; }

/* Pattern watermark — the concentric-rings motif as a large corner mark.
   Multiply blend drops the white ground so only the green linework reads. */
.nm-card--pattern::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url('../patterns/motif-rings.png') right -28px bottom -34px / 230px no-repeat;
  mix-blend-mode:multiply; opacity:.5;
}
.nm-card--pattern.nm-card--dark::before{
  mix-blend-mode:screen; opacity:.4;
}

/* Photo-backed card — set the image inline on the element
   (background-image:url(...) on the card itself); this ::before is the
   translucent dark scrim that sits over it so copy stays legible. */
.nm-card--photo{
  color:var(--nm-white);
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.nm-card--photo::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(28,52,62,.28), rgba(19,35,42,.66));
}
.nm-card--photo .nm-stat__num{ color:var(--nm-white); }
.nm-card--photo .nm-stat__label{ color:rgba(255,255,255,.85); }
.nm-card--photo .nm-card__eyebrow{ color:var(--nm-green-soft); }
.nm-card--photo .nm-card__title{ color:var(--nm-white); }
.nm-card--photo .nm-card__body{ color:rgba(255,255,255,.85); }

.nm-card__eyebrow{
  font-family:var(--nm-font-eyebrow); font-weight:600;
  font-size:var(--nm-fs-eyebrow); letter-spacing:var(--nm-tracking-eyebrow);
  text-transform:uppercase; color:var(--nm-green-deep); margin:0 0 var(--nm-sp-3);
}
.nm-card__title{
  font-family:var(--nm-font-heading); font-weight:var(--nm-weight-heading-bold);
  font-size:var(--nm-fs-h3); line-height:var(--nm-lh-tight); margin:0 0 var(--nm-sp-3);
  letter-spacing:-0.01em;
}
.nm-card__body{ font-family:var(--nm-font-body); font-size:var(--nm-fs-body); line-height:var(--nm-lh-body); color:var(--nm-muted); margin:0; }

/* image card */
.nm-card--image{ padding:0; overflow:hidden; }
.nm-card--image img{ display:block; width:100%; height:auto; }
.nm-card--image .nm-card__pad{ padding:var(--nm-sp-5); }

/* stat card */
.nm-stat__num{
  font-family:var(--nm-font-heading); font-weight:300; color:var(--nm-green);
  font-size:clamp(2rem,4vw,2.8rem); line-height:1; letter-spacing:-0.02em;
}
.nm-stat__label{ font-family:var(--nm-font-body); color:var(--nm-muted); font-size:var(--nm-fs-small); }