/* =====================================================================
   BURO STAAL — Colors & Type foundations
   Growth partner for the Dutch manufacturing industry (maakindustrie)
   ---------------------------------------------------------------------
   Load this file, then use the CSS variables below. Two typefaces:
   Gelion (geometric sans) for everything. Bold for display + UI labels.
   ===================================================================== */

/* ---------- Webfonts ---------- */
@font-face {
  font-family: "Gelion";
  src: url("fonts/Gelion-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gelion";
  src: url("fonts/Gelion-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     BRAND COLORS
     ============================================================ */
  --bs-green:        #7EF769;  /* signature lime green — accents, highlights, CTAs on dark */
  --bs-green-ink:    #0A0A0A;  /* text/icon color when sitting ON green — pure black */
  --bs-blue:         #280BC4;  /* deep ultramarine — secondary brand, links, emphasis */
  --bs-black:        #0A0A0A;  /* near-black — primary dark surface + display text */
  --bs-white:        #FFFFFF;

  /* ============================================================
     NEUTRAL SCALE  (warm-leaning grays, matched to brand photography)
     ============================================================ */
  --bs-n-0:   #FFFFFF;
  --bs-n-50:  #F7F7F5;  /* page background (warm off-white) */
  --bs-n-100: #EFEEEB;
  --bs-n-200: #E2E1DC;
  --bs-n-300: #CBC9C2;
  --bs-n-400: #A6A39A;
  --bs-n-500: #7C7A72;
  --bs-n-600: #565550;
  --bs-n-700: #3A3A36;
  --bs-n-800: #222220;
  --bs-n-900: #0A0A0A;

  /* ============================================================
     SEMANTIC COLOR TOKENS
     ============================================================ */
  --bs-bg:            var(--bs-n-50);   /* default page background */
  --bs-bg-elevated:   var(--bs-n-0);    /* cards, panels */
  --bs-bg-dark:       var(--bs-black);  /* dark sections, footer, hero */
  --bs-surface-green: var(--bs-green);

  --bs-fg:            var(--bs-n-900);  /* primary text */
  --bs-fg-muted:      var(--bs-n-600);  /* secondary text */
  --bs-fg-subtle:     var(--bs-n-500);  /* captions, meta */
  --bs-fg-on-dark:    var(--bs-white);  /* text on black */
  --bs-fg-on-green:   var(--bs-green-ink);

  --bs-border:        var(--bs-n-200);
  --bs-border-dark:   rgba(255,255,255,0.14);

  --bs-link:          var(--bs-blue);
  --bs-accent:        var(--bs-green);

  /* status (kept close to brand palette) */
  --bs-success: #1F8A5B;
  --bs-warning: #C9881E;
  --bs-danger:  #C8341F;

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --bs-font-sans: "Gelion", "Helvetica Neue", "Arial", system-ui, sans-serif;
  --bs-font-display: "Gelion", "Helvetica Neue", "Arial", system-ui, sans-serif;

  /* Type scale (1.250 major-third-ish, tuned) */
  --bs-text-xs:   0.75rem;   /* 12px */
  --bs-text-sm:   0.875rem;  /* 14px */
  --bs-text-base: 1rem;      /* 16px */
  --bs-text-lg:   1.125rem;  /* 18px */
  --bs-text-xl:   1.375rem;  /* 22px */
  --bs-text-2xl:  1.75rem;   /* 28px */
  --bs-text-3xl:  2.25rem;   /* 36px */
  --bs-text-4xl:  3rem;      /* 48px */
  --bs-text-5xl:  4rem;      /* 64px */
  --bs-text-6xl:  5.5rem;    /* 88px */

  --bs-weight-regular: 400;
  --bs-weight-bold:    700;

  --bs-leading-tight:   1.02;  /* big display headlines, tight */
  --bs-leading-snug:    1.12;
  --bs-leading-normal:  1.5;
  --bs-leading-relaxed: 1.65;

  --bs-tracking-tight: -0.02em;  /* display */
  --bs-tracking-normal: 0;
  --bs-tracking-wide:  0.04em;   /* small labels */

  /* ============================================================
     RADII / SHADOW / SPACING
     ============================================================ */
  /* Corners are SHARP by default. Buro Staal ("staal" = steel) is an industrial,
     square-cornered brand: 0px is the default for cards, buttons, inputs, images.
     The small radii below are occasional exceptions only. */
  --bs-radius-none: 0;       /* DEFAULT */
  --bs-radius-sm:  4px;
  --bs-radius-md:  8px;
  --bs-radius-lg:  12px;
  --bs-radius-pill: 999px;   /* rare — avoid unless truly needed */

  /* No shadows. Buro Staal is a flat brand — separation comes from hairline
     borders, solid color blocks and whitespace, never drop shadows. */
  --bs-shadow-sm: none;
  --bs-shadow-md: none;
  --bs-shadow-lg: none;

  --bs-space-1: 4px;
  --bs-space-2: 8px;
  --bs-space-3: 12px;
  --bs-space-4: 16px;
  --bs-space-5: 24px;
  --bs-space-6: 32px;
  --bs-space-7: 48px;
  --bs-space-8: 64px;
  --bs-space-9: 96px;

  --bs-ease: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --bs-dur: 220ms; /* @kind other */
}

/* =====================================================================
   SEMANTIC ELEMENT STYLES — opt-in via .bs-prose or use the classes
   ===================================================================== */
.bs-display {
  font-family: var(--bs-font-display);
  font-weight: var(--bs-weight-bold);
  font-size: var(--bs-text-6xl);
  line-height: var(--bs-leading-tight);
  letter-spacing: var(--bs-tracking-tight);
  color: var(--bs-fg);
  text-wrap: balance;
}

.bs-h1 {
  font-family: var(--bs-font-display);
  font-weight: var(--bs-weight-bold);
  font-size: var(--bs-text-4xl);
  line-height: var(--bs-leading-snug);
  letter-spacing: var(--bs-tracking-tight);
  color: var(--bs-fg);
  text-wrap: balance;
}
.bs-h2 {
  font-family: var(--bs-font-display);
  font-weight: var(--bs-weight-bold);
  font-size: var(--bs-text-3xl);
  line-height: var(--bs-leading-snug);
  letter-spacing: var(--bs-tracking-tight);
  color: var(--bs-fg);
}
.bs-h3 {
  font-family: var(--bs-font-sans);
  font-weight: var(--bs-weight-bold);
  font-size: var(--bs-text-xl);
  line-height: var(--bs-leading-snug);
  color: var(--bs-fg);
}
.bs-eyebrow {
  font-family: var(--bs-font-sans);
  font-weight: var(--bs-weight-bold);
  font-size: var(--bs-text-sm);
  letter-spacing: 0.01em;
  color: var(--bs-fg-muted);
}
.bs-body {
  font-family: var(--bs-font-sans);
  font-weight: var(--bs-weight-regular);
  font-size: var(--bs-text-lg);
  line-height: var(--bs-leading-relaxed);
  color: var(--bs-fg-muted);
}
.bs-small {
  font-family: var(--bs-font-sans);
  font-size: var(--bs-text-sm);
  line-height: var(--bs-leading-normal);
  color: var(--bs-fg-subtle);
}

/* Underline accent on key words in headlines — the ONLY highlight treatment
   the brand uses, and only occasionally. Default green (works on light or dark). */
.bs-underline {
  background-image: linear-gradient(var(--bs-green), var(--bs-green));
  background-repeat: no-repeat;
  background-position: 0 96%;
  background-size: 100% 0.22em;
}
/* On dark surfaces the underline may instead be dark-blue under white text. */
.bs-underline--blue {
  background-image: linear-gradient(var(--bs-blue), var(--bs-blue));
}

/* Shaded word — occasional green-fill emphasis on a single word, light OR dark.
   Side padding lets the green extend a little past the word edges. Always pair
   with dark ink for the text. Give the line above breathing room (line-height). */
.bs-shade {
  background: var(--bs-green);
  color: var(--bs-green-ink);
  padding: 0.02em 0.22em;
  border-radius: 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}