/* ============================================================
   Functio — Colors & Type
   Derived from Huisstijlhandboek Functio (huisstijl PDF)
   ============================================================ */

/* Font — Source Sans Pro / Source Sans 3 (its maintained successor on
   Google Fonts). We load weights 300/400/600/700. If you need
   true "Source Sans Pro Semibold", use weight 600. */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ---------- Brand palette (from PDF) ---------- */
  --fn-purple:        #6750c2;   /* R103 G80  B194 — primary brand */
  --fn-black:         #000000;   /* Zwart */
  --fn-blue:          #2a5dbe;   /* R42  G93  B190 */
  --fn-navy:          #273764;   /* R39  G55  B100 */

  /* ---------- Purple scale (tints/shades of #6750c2) ---------- */
  --fn-purple-50:   #f1eefb;
  --fn-purple-100:  #e3dcf7;
  --fn-purple-200:  #c7b9ef;
  --fn-purple-300:  #a895e5;
  --fn-purple-400:  #8a73d9;
  --fn-purple-500:  #6750c2;   /* brand */
  --fn-purple-600:  #5640a8;
  --fn-purple-700:  #43328a;
  --fn-purple-800:  #32266a;
  --fn-purple-900:  #221a48;

  /* ---------- Blue scale (around #2a5dbe) ---------- */
  --fn-blue-50:   #eaf0fb;
  --fn-blue-100:  #d1dff5;
  --fn-blue-200:  #a3beea;
  --fn-blue-300:  #6f98db;
  --fn-blue-400:  #4878cc;
  --fn-blue-500:  #2a5dbe;   /* accent */
  --fn-blue-600:  #234da0;
  --fn-blue-700:  #1c3e80;
  --fn-blue-800:  #273764;   /* navy — brand */
  --fn-blue-900:  #1a2748;

  /* ---------- Neutrals ---------- */
  --fn-white:      #ffffff;
  --fn-gray-25:    #fcfcfd;
  --fn-gray-50:    #f7f7fa;
  --fn-gray-100:   #eeeef2;
  --fn-gray-200:   #e0e0e7;
  --fn-gray-300:   #c8c8d2;
  --fn-gray-400:   #9a9aa8;
  --fn-gray-500:   #6e6e7c;
  --fn-gray-600:   #4e4e5a;
  --fn-gray-700:   #36363f;
  --fn-gray-800:   #23232a;
  --fn-gray-900:   #111114;

  /* ---------- Semantic — surfaces ---------- */
  --fn-bg:          var(--fn-white);
  --fn-bg-muted:    var(--fn-gray-50);
  --fn-bg-subtle:   var(--fn-gray-100);
  --fn-bg-inverse:  var(--fn-gray-900);
  --fn-bg-brand:    var(--fn-purple-500);
  --fn-bg-brand-subtle: var(--fn-purple-50);

  --fn-surface:        var(--fn-white);
  --fn-surface-muted:  var(--fn-gray-50);
  --fn-surface-raised: var(--fn-white);
  --fn-border:         var(--fn-gray-200);
  --fn-border-strong:  var(--fn-gray-300);
  --fn-border-brand:   var(--fn-purple-500);

  /* ---------- Semantic — foreground ---------- */
  --fn-fg:            var(--fn-gray-900);
  --fn-fg-1:          var(--fn-gray-900);  /* primary text */
  --fn-fg-2:          var(--fn-gray-700);  /* secondary text */
  --fn-fg-3:          var(--fn-gray-500);  /* tertiary / meta */
  --fn-fg-muted:      var(--fn-gray-400);
  --fn-fg-inverse:    var(--fn-white);
  --fn-fg-brand:      var(--fn-purple-500);
  --fn-fg-on-brand:   var(--fn-white);
  --fn-fg-link:       var(--fn-purple-600);

  /* ---------- Semantic — feedback ---------- */
  --fn-success:       #1f9d55;
  --fn-success-bg:    #e6f6ee;
  --fn-warning:       #b8860b;
  --fn-warning-bg:    #fbf3dd;
  --fn-danger:        #c0392b;
  --fn-danger-bg:     #fbe9e7;
  --fn-info:          var(--fn-blue-500);
  --fn-info-bg:       var(--fn-blue-50);

  /* ---------- Typography ---------- */
  --fn-font-sans: 'Source Sans 3', 'Source Sans Pro', ui-sans-serif, system-ui, -apple-system,
                  'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fn-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Source Code Pro', monospace;

  /* Weights — primary wordmark/headings use semibold/bold */
  --fn-w-light:    300;
  --fn-w-regular:  400;
  --fn-w-medium:   500;
  --fn-w-semibold: 600;
  --fn-w-bold:     700;

  /* Type scale — 1.200 minor-third-ish, slightly compacted for product UI */
  --fn-fs-xs:   0.75rem;    /* 12 */
  --fn-fs-sm:   0.875rem;   /* 14 */
  --fn-fs-md:   1rem;       /* 16 — body */
  --fn-fs-lg:   1.125rem;   /* 18 */
  --fn-fs-xl:   1.375rem;   /* 22 */
  --fn-fs-2xl:  1.75rem;    /* 28 */
  --fn-fs-3xl:  2.25rem;    /* 36 */
  --fn-fs-4xl:  3rem;       /* 48 */
  --fn-fs-5xl:  4rem;       /* 64 */
  --fn-fs-6xl:  5.5rem;     /* 88 — hero wordmark style */

  --fn-lh-tight:  1.12;
  --fn-lh-snug:   1.28;
  --fn-lh-base:   1.55;
  --fn-lh-loose:  1.75;

  --fn-tracking-tight:  -0.02em;
  --fn-tracking-snug:   -0.01em;
  --fn-tracking-normal: 0;
  --fn-tracking-wide:   0.04em;
  --fn-tracking-caps:   0.12em;

  /* ---------- Radius ---------- */
  --fn-radius-xs:  4px;
  --fn-radius-sm:  6px;
  --fn-radius-md:  10px;
  --fn-radius-lg:  14px;
  --fn-radius-xl:  20px;
  --fn-radius-2xl: 28px;
  --fn-radius-pill: 999px;

  /* ---------- Spacing (4pt scale) ---------- */
  --fn-space-0:  0;
  --fn-space-1:  4px;
  --fn-space-2:  8px;
  --fn-space-3:  12px;
  --fn-space-4:  16px;
  --fn-space-5:  20px;
  --fn-space-6:  24px;
  --fn-space-8:  32px;
  --fn-space-10: 40px;
  --fn-space-12: 48px;
  --fn-space-16: 64px;
  --fn-space-20: 80px;

  /* ---------- Shadows ---------- */
  --fn-shadow-xs: 0 1px 2px rgba(17, 17, 20, 0.04);
  --fn-shadow-sm: 0 1px 2px rgba(17, 17, 20, 0.06), 0 1px 3px rgba(17, 17, 20, 0.04);
  --fn-shadow-md: 0 4px 10px rgba(17, 17, 20, 0.06), 0 2px 4px rgba(17, 17, 20, 0.04);
  --fn-shadow-lg: 0 12px 28px rgba(17, 17, 20, 0.10), 0 4px 10px rgba(17, 17, 20, 0.05);
  --fn-shadow-xl: 0 24px 48px rgba(17, 17, 20, 0.14), 0 8px 16px rgba(17, 17, 20, 0.06);
  --fn-focus-ring: 0 0 0 3px rgba(103, 80, 194, 0.28);

  /* ---------- Motion ---------- */
  --fn-ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --fn-ease-emphasized: cubic-bezier(0.3, 0.0, 0.0, 1.0);
  --fn-dur-fast:   120ms;
  --fn-dur-base:   200ms;
  --fn-dur-slow:   320ms;
}

/* ============================================================
   Semantic type styles — apply as classes or combine as needed
   ============================================================ */
html, body {
  font-family: var(--fn-font-sans);
  font-size: var(--fn-fs-md);
  line-height: var(--fn-lh-base);
  color: var(--fn-fg-1);
  background: var(--fn-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.fn-display {
  font-weight: var(--fn-w-bold);
  font-size: var(--fn-fs-6xl);
  line-height: var(--fn-lh-tight);
  letter-spacing: var(--fn-tracking-tight);
  color: var(--fn-fg-1);
}

.fn-h1, h1 {
  font-weight: var(--fn-w-bold);
  font-size: var(--fn-fs-4xl);
  line-height: var(--fn-lh-tight);
  letter-spacing: var(--fn-tracking-tight);
  color: var(--fn-fg-1);
  margin: 0;
}
.fn-h2, h2 {
  font-weight: var(--fn-w-semibold);
  font-size: var(--fn-fs-3xl);
  line-height: var(--fn-lh-snug);
  letter-spacing: var(--fn-tracking-snug);
  color: var(--fn-fg-1);
  margin: 0;
}
.fn-h3, h3 {
  font-weight: var(--fn-w-semibold);
  font-size: var(--fn-fs-2xl);
  line-height: var(--fn-lh-snug);
  color: var(--fn-fg-1);
  margin: 0;
}
.fn-h4, h4 {
  font-weight: var(--fn-w-semibold);
  font-size: var(--fn-fs-xl);
  line-height: var(--fn-lh-snug);
  color: var(--fn-fg-1);
  margin: 0;
}
.fn-h5, h5 {
  font-weight: var(--fn-w-semibold);
  font-size: var(--fn-fs-lg);
  line-height: var(--fn-lh-snug);
  color: var(--fn-fg-1);
  margin: 0;
}

.fn-p, p {
  font-weight: var(--fn-w-regular);
  font-size: var(--fn-fs-md);
  line-height: var(--fn-lh-base);
  color: var(--fn-fg-1);
  margin: 0;
}

.fn-lead {
  font-weight: var(--fn-w-regular);
  font-size: var(--fn-fs-lg);
  line-height: var(--fn-lh-base);
  color: var(--fn-fg-2);
}

.fn-small {
  font-size: var(--fn-fs-sm);
  line-height: var(--fn-lh-base);
  color: var(--fn-fg-2);
}

.fn-meta {
  font-size: var(--fn-fs-xs);
  line-height: var(--fn-lh-snug);
  color: var(--fn-fg-3);
}

.fn-overline {
  font-weight: var(--fn-w-semibold);
  font-size: var(--fn-fs-xs);
  line-height: var(--fn-lh-snug);
  letter-spacing: var(--fn-tracking-caps);
  text-transform: uppercase;
  color: var(--fn-fg-3);
}

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

a, .fn-link {
  color: var(--fn-fg-link);
  text-decoration: none;
  transition: color var(--fn-dur-fast) var(--fn-ease-standard);
}
a:hover, .fn-link:hover { color: var(--fn-purple-700); text-decoration: underline; text-underline-offset: 3px; }

/* Brand accent — the signature purple dot used after the wordmark */
.fn-dot::after {
  content: '.';
  color: var(--fn-purple-500);
}