/* ============================================================
   Bossers & Cnossen — Colors & Type
   --------------------------------------------------------------
   Brand: Bossers & Cnossen ("B&C", bnc.nl) — Dutch IT services
   firm, Groningen. Tagline: "Sharing ideas & IT".
   --------------------------------------------------------------
   Brand colors confirmed by the brand owner:
     • Light blue (base) ........ #20A5DE
     • Super light blue ......... #CFDADF
     • Dark blue ................ #016A93
     • Darkest blue ............. #014572
     • Yellow (accent) .......... #F8C537
   These five values are exact; intermediate steps in the scale
   are derived from them.
   ============================================================ */

/* ---------- 1. Webfonts (local) ---------- */
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 100; src: url("fonts/Raleway-Thin.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Raleway"; font-style: italic; font-weight: 100; src: url("fonts/Raleway-ThinItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 200; src: url("fonts/Raleway-ExtraLight.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Raleway"; font-style: italic; font-weight: 200; src: url("fonts/Raleway-ExtraLightItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 300; src: url("fonts/Raleway-Light.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Raleway"; font-style: italic; font-weight: 300; src: url("fonts/Raleway-LightItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 400; src: url("fonts/Raleway-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Raleway"; font-style: italic; font-weight: 400; src: url("fonts/Raleway-Italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 500; src: url("fonts/Raleway-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Raleway"; font-style: italic; font-weight: 500; src: url("fonts/Raleway-MediumItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 600; src: url("fonts/Raleway-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Raleway"; font-style: italic; font-weight: 600; src: url("fonts/Raleway-SemiBoldItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 700; src: url("fonts/Raleway-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Raleway"; font-style: italic; font-weight: 700; src: url("fonts/Raleway-BoldItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 800; src: url("fonts/Raleway-ExtraBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Raleway"; font-style: italic; font-weight: 800; src: url("fonts/Raleway-ExtraBoldItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 900; src: url("fonts/Raleway-Black.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Raleway"; font-style: italic; font-weight: 900; src: url("fonts/Raleway-BlackItalic.ttf") format("truetype"); font-display: swap; }

:root {
  /* ---------- 2. Color — Primitive scale ---------- */

  /* B&C Blue — confirmed brand palette
     400 = base light blue, 600 = dark, 700 = darkest.
     100 = super-light. Other steps are interpolated. */
  --bnc-blue-50:  #E8F4FA;
  --bnc-blue-100: #CFDADF;   /* EXACT — super-light blue */
  --bnc-blue-200: #A8D9EE;
  --bnc-blue-300: #6CC2E7;
  --bnc-blue-400: #20A5DE;   /* EXACT — base brand light blue */
  --bnc-blue-500: #0E8FC5;   /* Bridge — hover for light-blue surfaces */
  --bnc-blue-600: #016A93;   /* EXACT — dark blue (primary buttons, links) */
  --bnc-blue-700: #014572;   /* EXACT — darkest blue (footer, headings on light) */
  --bnc-blue-800: #013657;
  --bnc-blue-900: #01253D;

  /* Brand yellow */
  --bnc-yellow:     #F8C537;   /* EXACT */
  --bnc-yellow-50:  #FEF5D7;
  --bnc-yellow-700: #A07F0E;

  /* Neutrals — paper-white to ink */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F8FA;     /* Page background tint */
  --neutral-100: #EEF0F3;     /* Card divider / hover */
  --neutral-200: #DDE1E7;     /* Borders */
  --neutral-300: #C2C8D1;
  --neutral-400: #99A1AE;
  --neutral-500: #6F7785;     /* Body secondary */
  --neutral-600: #4F5765;
  --neutral-700: #353C48;     /* Body primary */
  --neutral-800: #1F242E;
  --neutral-900: #0F1620;     /* Display ink */

  /* Semantic accents — used sparingly */
  --accent-teal:   #1F8E94;            /* Reserve — cloud / oss category, use sparingly */
  --success:       #2F8F5C;
  --warning:       #A07F0E;
  --danger:        var(--bnc-blue-700);   /* Brand discipline: never red. Use dark navy for emphatic warnings. */
  --info:          var(--bnc-blue-400);

  /* ---------- 3. Color — Semantic ---------- */
  --color-bg:           var(--neutral-0);
  --color-bg-muted:     var(--neutral-50);
  --color-bg-inverse:   var(--bnc-blue-700);
  --color-bg-brand:     var(--bnc-blue-600);    /* Primary brand fills (buttons) */
  --color-bg-brand-soft:var(--bnc-blue-400);    /* Soft brand fills (hero, badges) */
  --color-surface:      var(--neutral-0);
  --color-surface-alt:  var(--neutral-50);

  --color-fg:           var(--neutral-900);
  --color-fg-strong:    #000000;
  --color-fg-muted:     var(--neutral-500);
  --color-fg-onbrand:   var(--neutral-0);
  --color-fg-onmuted:   var(--neutral-700);

  --color-border:       var(--neutral-200);
  --color-border-strong:var(--neutral-300);
  --color-divider:      var(--neutral-100);

  --color-link:         var(--bnc-blue-600);
  --color-link-hover:   var(--bnc-blue-700);

  --color-focus-ring:   var(--bnc-blue-400);

  /* ---------- 4. Typography — Stacks ---------- */
  --font-sans: "Raleway", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Raleway", "Raleway", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* ---------- 5. Typography — Scale ---------- */
  /* Modular ~ 1.250 (major third) */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;

  --lh-tight: 1.1;    /* @kind font */
  --lh-snug: 1.25;    /* @kind font */
  --lh-normal: 1.5;   /* @kind font */
  --lh-loose: 1.7;    /* @kind font */

  --tracking-tight: -0.02em;  /* @kind font */
  --tracking-normal: 0;       /* @kind font */
  --tracking-wide: 0.04em;    /* @kind font */

  --fw-light: 300;       /* @kind font */
  --fw-regular: 400;     /* @kind font */
  --fw-medium: 500;      /* @kind font */
  --fw-semibold: 600;    /* @kind font */
  --fw-bold: 700;        /* @kind font */
  --fw-extrabold: 800;   /* @kind font */
  --fw-black: 900;       /* @kind font */

  /* ---------- 6. Spacing ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- 7. Radius ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;        /* default card */
  --radius-lg: 16px;       /* hero cards, case study cards */
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- 8. Elevation ---------- */
  --shadow-xs: 0 1px 2px rgba(15, 22, 32, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 22, 32, 0.06), 0 1px 2px rgba(15, 22, 32, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 22, 32, 0.08), 0 1px 3px rgba(15, 22, 32, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 22, 32, 0.10), 0 4px 8px rgba(15, 22, 32, 0.05);
  --shadow-xl: 0 24px 48px rgba(15, 22, 32, 0.12);
  --shadow-focus: 0 0 0 3px rgba(32, 165, 222, 0.35);

  /* ---------- 9. Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);     /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --dur-fast: 120ms;   /* @kind other */
  --dur-med: 220ms;    /* @kind other */
  --dur-slow: 360ms;   /* @kind other */

  /* ---------- 10. Layout ---------- */
  --container-max: 1240px;   /* @kind spacing */
  --container-pad: 24px;     /* @kind spacing */
}

/* =============================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ============================================================ */

html { font-family: var(--font-sans); color: var(--color-fg); background: var(--color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-size: var(--fs-16); line-height: var(--lh-normal); font-weight: var(--fw-regular); }

/* Display & Headings — match the bnc.nl visual rhythm where
   H1 is heavy and short ("Grip op je IT") and H2/H3 frequently
   pair a regular phrase with a bold phrase. */

.h-display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(2.5rem, 5vw + 1rem, var(--fs-72));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(2rem, 3vw + 1rem, var(--fs-60));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.6rem, 1.4vw + 1rem, var(--fs-36));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--color-fg);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--color-fg);
}

h5, .h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-14);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.lead, p.lead {
  font-size: var(--fs-20);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  color: var(--color-fg-onmuted);
}

p, .body {
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--color-fg);
}

small, .caption {
  font-size: var(--fs-14);
  color: var(--color-fg-muted);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--bnc-blue-600);
}

/* Yellow highlight underline — recurring B&C treatment
   (used on the brand's emphasised words, e.g. "écht veilig?") */
.highlight {
  background-image: linear-gradient(to top, var(--bnc-yellow) 0 36%, transparent 36% 100%);
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 100%;
  padding: 0 2px;
}

.quote {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--color-fg);
}

code, kbd, samp, .mono { font-family: var(--font-mono); font-size: 0.95em; }

a { color: var(--color-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--color-link-hover); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }

/* The "Sharing ideas & IT" payoff pattern from the site
   pairs one bold word with the rest in regular weight. */
.payoff { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-24); }
.payoff strong { font-weight: var(--fw-extrabold); }