/* ============================================================================
   Dafor — Colors & Type
   ----------------------------------------------------------------------------
   Source of truth: brand-sources/Logo Dafor/Logo-Dafor_RGB.svg — the three
   authoritative brand colors are embedded as the logo's fills.

   TYPE: Mulish (Google Fonts) is the official Dafor web typeface. It shares
   Proxima Nova's humanist geometry and x-height and is free to host anywhere.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600;700;800&display=swap");

:root {
  /* --------------------------------------------------------------------- */
  /* Brand colors — from the Dafor identity kit (Logo-Dafor_RGB.svg)       */
  /* Each one carries a narrative step in the BI journey.                  */
  /* --------------------------------------------------------------------- */

  /* Donkerblauw — "Basis": betrouwbare data, structuur, fundament */
  --brand-navy:        #2b3b65;
  --brand-navy-90:     #404f74;
  --brand-navy-70:     #6b7693;
  --brand-navy-50:     #959db2;
  --brand-navy-20:     #d5d8e0;
  --brand-navy-10:     #eaebf0;
  --brand-navy-05:     #f4f5f7;

  /* Oranje ochre — "Inzicht": aha-moment, warme accent */
  --brand-orange:      #d48539;
  --brand-orange-90:   #b8722f;
  --brand-orange-80:   #9e6127;
  --brand-orange-70:   #dc9a5c;
  --brand-orange-50:   #e6b688;
  --brand-orange-20:   #f4dcc0;
  --brand-orange-10:   #faecda;
  --brand-orange-05:   #fdf6ee;

  /* Teal — "Beweging": trends, patronen, richting */
  --brand-teal:        #52a79a;
  --brand-teal-90:     #63b0a4;
  --brand-teal-70:     #86c1b8;
  --brand-teal-20:     #dcedeb;
  --brand-teal-10:     #eef6f5;
  --brand-teal-05:     #f6fbfa;

  /* Helder blauw — "Beslissing": keuzes, actie, impact (accent only; */
  /* not in the three-color logo mark — use sparingly) */
  --brand-blue:        #2050dd;
  --brand-blue-90:     #3a67e1;
  --brand-blue-70:     #7891ea;
  --brand-blue-20:     #ced7f7;
  --brand-blue-10:     #e6ebfb;

  /* --------------------------------------------------------------------- */
  /* Neutrals — warm-cool greys tuned to sit with navy                     */
  /* --------------------------------------------------------------------- */
  --neutral-0:   #ffffff;
  --neutral-50:  #fafbfc;
  --neutral-100: #f4f6f9;
  --neutral-200: #e6eaef;
  --neutral-300: #d1d7e0;
  --neutral-400: #a8b0bd;
  --neutral-500: #7a8394;
  --neutral-600: #576071;
  --neutral-700: #3a4254;
  --neutral-800: #232a3a;
  --neutral-900: #121826;

  /* --------------------------------------------------------------------- */
  /* Semantic tokens — prefer these in product code                        */
  /* --------------------------------------------------------------------- */
  --bg-page:        var(--neutral-0);
  --bg-subtle:      var(--neutral-50);
  --bg-muted:       var(--neutral-100);
  --bg-panel:       var(--neutral-0);
  --bg-inverse:     var(--brand-navy);

  --fg1:            var(--brand-navy);        /* primary text / headings */
  --fg2:            var(--neutral-700);       /* body copy */
  --fg3:            var(--neutral-500);       /* meta, captions */
  --fg-on-brand:    #ffffff;

  --border:         var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-focus:   var(--brand-blue);

  --accent:         var(--brand-navy);        /* primary interactive */
  --accent-hover:   var(--brand-navy-90);
  --highlight:      var(--brand-orange);      /* calls to action, insight */
  --movement:       var(--brand-teal);        /* trends, visualisations */

  /* Status — mapped to brand where possible */
  --status-ok:      var(--brand-teal);
  --status-info:    var(--brand-blue);
  --status-warn:    var(--brand-orange);
  --status-error:   #d92d20;
  --status-idle:    var(--neutral-400);

  /* --------------------------------------------------------------------- */
  /* Type — Mulish (official Dafor web typeface)                           */
  /* --------------------------------------------------------------------- */
  --font-sans: "Mulish", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;

  /* Type scale */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  40px;
  --fs-4xl:  56px;
  --fs-5xl:  72px;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* --------------------------------------------------------------------- */
  /* Spacing (4px base)                                                    */
  /* --------------------------------------------------------------------- */
  --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;

  /* --------------------------------------------------------------------- */
  /* Radii — soft, modest corners (matches logo hex/arrow geometry)        */
  /* --------------------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* --------------------------------------------------------------------- */
  /* Shadows — restrained, corporate                                        */
  /* --------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(43, 59, 101, 0.06);
  --shadow-sm: 0 2px 4px rgba(43, 59, 101, 0.06), 0 1px 2px rgba(43, 59, 101, 0.04);
  --shadow-md: 0 6px 16px rgba(43, 59, 101, 0.08), 0 2px 4px rgba(43, 59, 101, 0.04);
  --shadow-lg: 0 16px 32px rgba(43, 59, 101, 0.10), 0 4px 8px rgba(43, 59, 101, 0.04);
  --shadow-xl: 0 32px 64px rgba(43, 59, 101, 0.14);

  /* --------------------------------------------------------------------- */
  /* Motion                                                                 */
  /* --------------------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   280ms;
}

/* =========================================================================
   Base
   ========================================================================= */
html, body {
  background: var(--bg-page);
  color: var(--fg2);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

/* =========================================================================
   Semantic type roles
   ========================================================================= */
.display, .h-display {
  font-family: var(--font-sans);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
  color: var(--fg1);
  margin: 0;
}
.h1, h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
  color: var(--fg1);
  margin: 0;
}
.h2, h2 {
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--fg1);
  margin: 0;
}
.h3, h3 {
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
  color: var(--fg1);
  margin: 0;
}
.h4, h4 {
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg1);
  margin: 0;
}

.lead {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--fg2);
  font-weight: var(--fw-regular);
}
.body, p {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg2);
  margin: 0;
}
.body-sm { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--fg2); }
.caption { font-size: var(--fs-xs); line-height: var(--lh-normal); color: var(--fg3); }
.overline {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
}
.cta-text {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-navy);
}

/* =========================================================================
   Primitives
   ========================================================================= */
.card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.btn-primary   { background: var(--brand-navy); color: #fff; }
.btn-primary:hover   { background: var(--brand-navy-90); }
.btn-secondary { background: var(--brand-orange); color: #fff; }
.btn-secondary:hover { background: var(--brand-orange-90); }
.btn-outline   { background: transparent; color: var(--brand-navy); border-color: var(--brand-navy); }
.btn-outline:hover   { background: var(--brand-navy); color: #fff; }
.btn-ghost     { background: transparent; color: var(--brand-navy); }
.btn-ghost:hover     { background: var(--brand-navy-10); }

.badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  line-height: 1;
}
.badge-navy   { background: var(--brand-navy-10);   color: var(--brand-navy); }
.badge-orange { background: var(--brand-orange-10); color: var(--brand-orange); }
.badge-teal   { background: var(--brand-teal-10);   color: #0f8f80; }
.badge-blue   { background: var(--brand-blue-10);   color: var(--brand-blue); }
.badge-neutral{ background: var(--neutral-100);     color: var(--neutral-700); }