/* ==========================================================================
   GROWTH MIND — Colors & Type
   GTM Engineering Agency. "I help companies grow on purpose, not by accident."
   --------------------------------------------------------------------------
   Aesthetic: early-20th-century propaganda poster + woodcut/linocut +
   Shepard Fairey street-art. High contrast, limited palette, carved shapes.
   ========================================================================== */

/* ---- Webfonts -----------------------------------------------------------
   Barlow Condensed  — primary display/headings  (Google Fonts)
   IBM Plex Sans     — body / UI text             (Google Fonts)
   Archivo (expanded)— SUBSTITUTE for "Druk Wide" accent font. Druk Wide is
                       a paid Commercial Type face; Archivo at wdth 125 / wght
                       800–900 is the closest free stand-in. SWAP IF LICENSED.
   ------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800;900&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Archivo:wght@400..900&display=swap');

:root {
  /* ===== PRIMARY PALETTE ============================================== */
  --gm-ink:        #111513;  /* near-black — primary text, woodcut shapes   */
  --gm-paper:      #F2EFE8;  /* warm cream — primary surface / poster stock */
  --gm-stone:      #A7A79B;  /* warm gray  — muted text, dividers           */
  --gm-orange:     #D3541C;  /* signature burnt orange — primary accent     */

  /* ===== SECONDARY PALETTE ============================================ */
  --gm-navy:       #1E3A4A;  /* deep teal-navy — dark surfaces, depth       */
  --gm-slate:      #40646F;  /* slate teal     — secondary surfaces         */
  --gm-sage:       #6D7F5F;  /* olive sage     — supporting / success-ish   */
  --gm-gold:       #C49A5A;  /* aged gold/tan  — warm highlight             */
  --gm-mist:       #B7C6CF;  /* pale blue-gray — cool tint, quiet panels    */

  /* ===== ACCENT PALETTE =============================================== */
  --gm-yellow:     #F2C14E;  /* poster yellow — callouts, energy            */
  --gm-brick:      #B23A2E;  /* brick red     — flags, alerts, emphasis     */

  /* ===== TINTS & SHADES (derived, woodcut-flat) ======================= */
  --gm-ink-90:     #1c211e;  /* slightly lifted ink for layered blacks      */
  --gm-paper-deep: #E7E2D6;  /* recessed paper / panel fill                 */
  --gm-paper-edge: #DAD3C3;  /* hairline / border on paper                  */
  --gm-orange-ink: #B0410F;  /* pressed/darker orange (hover-down)          */
  --gm-orange-tint:#F6E2D5;  /* faint orange wash                           */
  --gm-navy-ink:   #14282F;  /* darker navy (pressed)                       */

  /* ===== SEMANTIC SURFACE / TEXT ====================================== */
  --bg-1: var(--gm-paper);        /* page background                        */
  --bg-2: var(--gm-paper-deep);   /* raised panel / card on paper           */
  --bg-inverse: var(--gm-ink);    /* dark sections                          */
  --bg-inverse-2: var(--gm-navy); /* dark secondary section                 */

  --fg-1: var(--gm-ink);          /* primary text on paper                  */
  --fg-2: #4a4d46;                /* secondary text on paper                */
  --fg-3: var(--gm-stone);        /* muted / captions                       */
  --fg-on-dark:   var(--gm-paper);/* primary text on ink/navy               */
  --fg-on-dark-2: #B9B6AC;        /* secondary text on dark                 */

  --accent:        var(--gm-orange);
  --accent-ink:    var(--gm-orange-ink);
  --accent-2:      var(--gm-yellow);
  --danger:        var(--gm-brick);

  --border-1: var(--gm-ink);      /* hard woodcut border (2–3px)            */
  --border-soft: var(--gm-paper-edge); /* quiet hairline on paper           */

  /* ===== TYPE FAMILIES ================================================ */
  --font-display: 'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif;
  --font-wide:    'Archivo', 'Arial Narrow', sans-serif; /* Druk Wide stand-in */
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* ===== TYPE SCALE (display = Barlow Condensed, tight & heavy) ======= */
  --fs-display:  clamp(3.5rem, 7vw, 6.5rem);  /* hero poster headline       */
  --fs-h1:       clamp(2.75rem, 5vw, 4.5rem);
  --fs-h2:       clamp(2rem, 3.4vw, 3rem);
  --fs-h3:       1.75rem;
  --fs-h4:       1.3rem;
  --fs-body-lg:  1.1875rem;
  --fs-body:     1.0625rem;
  --fs-small:    0.9375rem;
  --fs-caption:  0.8125rem;
  --fs-kicker:   0.8125rem;  /* the orange ALL-CAPS eyebrow label           */

  /* ===== RADII (carved, mostly square) =============================== */
  --radius-0: 0px;     /* default — woodcut shapes are hard-edged           */
  --radius-sm: 3px;    /* subtle softening on small controls                */
  --radius-md: 6px;
  --radius-pill: 999px;

  /* ===== BORDERS / STROKES =========================================== */
  --stroke: 2.5px;     /* the carved black keyline                          */
  --stroke-thick: 4px;

  /* ===== SHADOWS (hard offset blocks, not blurry) ==================== */
  --shadow-block:  4px 4px 0 var(--gm-ink);
  --shadow-block-lg: 7px 7px 0 var(--gm-ink);
  --shadow-block-orange: 4px 4px 0 var(--gm-orange);
  --shadow-soft:   0 2px 8px rgba(17,21,19,.12);

  /* ===== SPACING (4px base) ========================================== */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ===== MOTION ====================================================== */
  --ease-stamp: cubic-bezier(.2,.8,.2,1); /* quick settle, slight authority */
  --dur-fast: 120ms;
  --dur: 200ms;
}

/* ==========================================================================
   SEMANTIC TYPE — apply directly or copy into component styles
   ========================================================================== */
.gm-kicker {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-kicker);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}

.gm-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: .92;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--fg-1);
  text-wrap: balance;
}

h1, .gm-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: .95;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--fg-1);
  text-wrap: balance;
}

h2, .gm-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1;
  text-transform: uppercase;
  color: var(--fg-1);
  text-wrap: balance;
}

h3, .gm-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--fg-1);
}

h4, .gm-h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.2;
  color: var(--fg-1);
}

/* Druk-Wide-style accent display — for short callouts & stamps */
.gm-wide {
  font-family: var(--font-wide);
  font-weight: 800;
  font-stretch: 125%;
  font-size: var(--fs-h3);
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--fg-1);
}

p, .gm-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--fg-2);
}

.gm-body-lg {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--fg-2);
}

small, .gm-small { font-family: var(--font-body); font-size: var(--fs-small); color: var(--fg-3); }

code, .gm-code {
  font-family: var(--font-mono);
  font-size: .95em;
  background: var(--gm-ink);
  color: var(--gm-paper);
  padding: .12em .4em;
  border-radius: var(--radius-sm);
}