/* =========================================================================
   Winston Wolfe — Core tokens (colors + typography)
   ------------------------------------------------------------------------
   Source of truth for brand colors, type stack, and semantic text styles.
   Import into any HTML artifact:
     <link rel="stylesheet" href="/colors_and_type.css">
   ========================================================================= */

/* Webfonts ---------------------------------------------------------------- */
/* Primary: Nunito (rounded sans-serif). Secondary: Open Sans.               */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&family=Open+Sans:wght@400;600;700&display=swap');

:root {
  /* ---- Brand — primary ------------------------------------------------- */
  --ww-cyaan:        #4BBFEA;   /* brand name, CTAs, links, primary accent */
  --ww-limoengroen:  #C8D400;   /* highlights, graphic accents             */
  --ww-groen:        #5CB85C;   /* shapes, illustrations, icons            */

  /* ---- Brand — secondary ---------------------------------------------- */
  --ww-donkergroen:  #1E7A40;   /* headings, depth accents                 */
  --ww-lichtgroen:   #8DC63F;   /* tagline, subtle green accents           */

  /* ---- Neutrals ------------------------------------------------------- */
  --ww-wit:          #FFFFFF;
  --ww-lichtgrijs:   #F5F5F5;
  --ww-middengrijs:  #888888;
  --ww-donker:       #1A1A1A;

  /* Tinted shades (derived — use sparingly) */
  --ww-cyaan-12:     rgba(75, 191, 234, 0.12);
  --ww-cyaan-24:     rgba(75, 191, 234, 0.24);
  --ww-groen-12:     rgba(92, 184, 92, 0.12);
  --ww-limoen-12:    rgba(200, 212, 0, 0.12);
  --ww-donker-08:    rgba(26, 26, 26, 0.08);
  --ww-donker-60:    rgba(26, 26, 26, 0.60);

  /* ---- Semantic surface / text ---------------------------------------- */
  --bg:              var(--ww-wit);
  --bg-muted:        var(--ww-lichtgrijs);
  --bg-inverse:      var(--ww-donker);

  --fg:              var(--ww-donker);        /* body text (always)        */
  --fg-muted:        var(--ww-middengrijs);   /* secondary / metadata      */
  --fg-heading:      var(--ww-donkergroen);   /* h1–h2 primary heading     */
  --fg-on-brand:     var(--ww-wit);           /* text on cyaan/groen       */
  --fg-link:         var(--ww-cyaan);

  --border:          rgba(26, 26, 26, 0.10);
  --border-strong:   rgba(26, 26, 26, 0.20);
  --border-brand:    var(--ww-cyaan);

  /* ---- Semantic status ------------------------------------------------ */
  --success:         var(--ww-groen);
  --info:            var(--ww-cyaan);
  --warning:         #E8A13B;
  --danger:          #D64545;

  /* ---- Type families -------------------------------------------------- */
  --font-display:    'Nunito', 'Arial Rounded MT Bold', Arial, sans-serif;
  --font-body:       'Nunito', 'Open Sans', Arial, Helvetica, sans-serif;
  --font-long-form:  'Open Sans', 'Nunito', Arial, Helvetica, sans-serif;
  --font-mono:       ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Type weights --------------------------------------------------- */
  --fw-light:      300;
  --fw-regular:    400;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;

  /* ---- Type scale (px) ------------------------------------------------ */
  /*  Optimized for digital. Print: body stays 11–12pt.                    */
  --fs-caption:    11px;
  --fs-small:      13px;
  --fs-body:       15px;
  --fs-body-lg:    17px;
  --fs-h3:         20px;   /* 18–20pt                                      */
  --fs-h2:         28px;   /* 24–28pt                                      */
  --fs-h1:         40px;   /* 32–40pt                                      */
  --fs-display:    56px;

  /* ---- Line heights --------------------------------------------------- */
  --lh-tight:      1.15;
  --lh-snug:       1.30;
  --lh-normal:     1.55;
  --lh-relaxed:    1.70;

  /* ---- Tracking ------------------------------------------------------- */
  --tr-tight:      -0.01em;
  --tr-normal:      0;
  --tr-label:       0.02em;

  /* ---- Radii ---------------------------------------------------------- */
  --r-xs:     2px;
  --r-sm:     4px;
  --r-md:     6px;     /* buttons (brand minimum)                          */
  --r-lg:     8px;     /* buttons (brand max) / inputs                     */
  --r-xl:    12px;     /* cards                                            */
  --r-2xl:   20px;
  --r-pill:  999px;

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

  /* ---- Elevation ------------------------------------------------------ */
  --shadow-xs:  0 1px 2px rgba(26, 26, 26, 0.06);
  --shadow-sm:  0 2px 6px rgba(26, 26, 26, 0.08);
  --shadow-md:  0 6px 16px rgba(26, 26, 26, 0.10);
  --shadow-lg:  0 14px 32px rgba(26, 26, 26, 0.12);
  --shadow-brand-sm: 0 6px 18px rgba(75, 191, 234, 0.28);

  /* ---- Motion --------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-emphasis: cubic-bezier(0.2, 0.8, 0.2, 1.0);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   280ms;
}

/* =========================================================================
   Element defaults — apply by wrapping content in .ww, or include globally
   ========================================================================= */

.ww, body.ww {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ww h1, .ww .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-heading);
  margin: 0 0 var(--s-4);
}

.ww h2, .ww .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg-heading);
  margin: 0 0 var(--s-3);
}

.ww h3, .ww .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0 0 var(--s-2);
}

.ww p, .ww .p {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  margin: 0 0 var(--s-3);
  text-wrap: pretty;
}

.ww .lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg);
}

.ww .caption {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: var(--fg-muted);
  letter-spacing: var(--tr-label);
  text-transform: none;
}

.ww .label {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  letter-spacing: var(--tr-label);
  color: var(--fg);
}

.ww blockquote, .ww .quote {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--ww-cyaan);
  border-left: 3px solid var(--ww-cyaan);
  padding-left: var(--s-4);
  margin: var(--s-4) 0;
}

.ww a, .ww .link {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.ww a:hover { border-bottom-color: currentColor; }

.ww code, .ww .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--ww-lichtgrijs);
  padding: 1px 6px;
  border-radius: var(--r-sm);
}

/* Long-form doc mode — swap body stack to Open Sans */
.ww--longform p,
.ww--longform li { font-family: var(--font-long-form); }