/* Pijltje gooien — gebundelde stijlen (tokens). Niet handmatig bewerken. */

/* === tokens/fonts.css === */
/* ============================================================
   Pijltje gooien — Webfonts
   NOTE: These are loaded from Google Fonts as a SUBSTITUTION.
   No brand font files were provided. If you have licensed
   brand fonts, drop the .woff2 files in /assets/fonts and
   replace these @import-backed faces with local @font-face.
   - Display : Bricolage Grotesque (playful, friendly, clean)
   - Body    : Hanken Grotesque   (neutral, legible)
   - Numeric : Space Mono         (scoreboard / chalk numbers)
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesque:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap");


/* === tokens/colors.css === */
/* ============================================================
   Pijltje gooien — Color tokens
   Palette pulled straight off a regulation dartboard:
   warm black + cream wedges, scoring red + green, brass wire.
   Tones are softened/desaturated so nothing feels harsh.
   ============================================================ */

:root {
  /* --- Brand raw (the board) --------------------------------- */
  --board-ink:        #211C18;   /* black wedge segments        */
  --board-cream:      #EFE5D0;   /* cream wedge segments        */
  --dart-red:         #D24B47;   /* scoring red (softened)      */
  --dart-red-deep:    #B23A37;
  --dart-red-soft:    #F6DEDC;   /* red tint surface            */
  --dart-green:       #3E9D6F;   /* scoring green (softened)    */
  --dart-green-deep:  #2F7E58;
  --dart-green-soft:  #DBEFE4;   /* green tint surface          */
  --brass:            #C8A24B;   /* spider wire / metal accent  */
  --brass-deep:       #A9853A;
  --brass-soft:       #F3E8CC;

  /* --- Warm neutral scale (chalk → ink) ---------------------- */
  --ink-950:  #181410;
  --ink-900:  #211C18;
  --ink-800:  #322C26;
  --ink-700:  #463E36;
  --ink-600:  #5E544A;
  --ink-500:  #786C5F;
  --ink-400:  #9A8F81;
  --ink-300:  #BCB2A3;
  --ink-200:  #DAD1C2;
  --ink-150:  #E6DDCE;
  --ink-100:  #F1EADC;
  --ink-50:   #F8F3E9;
  --chalk:    #FCFAF3;   /* near-white, warm                    */
  --white:    #FFFFFF;

  /* --- Status (kept gentle) ---------------------------------- */
  --green:    var(--dart-green);
  --green-deep: var(--dart-green-deep);
  --red:      var(--dart-red);
  --red-deep: var(--dart-red-deep);
  --amber:    #E0A23C;
  --amber-soft: #F8EBCF;
  --info:     #5C8BA6;   /* soft chalk-blue, used sparingly     */
  --info-soft:#E0EAF0;

  /* ============================================================
     Semantic aliases — reference these in components, not raw.
     ============================================================ */

  /* Text */
  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-700);
  --text-muted:    var(--ink-500);
  --text-faint:    var(--ink-400);
  --text-on-dark:  var(--chalk);
  --text-on-color: var(--white);
  --text-link:     var(--dart-green-deep);

  /* Surfaces */
  --surface-page:    var(--ink-50);   /* the cream page         */
  --surface-card:    var(--white);
  --surface-raised:  var(--white);
  --surface-sunken:  var(--ink-100);
  --surface-ink:     var(--ink-900);  /* dark sections / footer */
  --surface-ink-2:   var(--ink-800);

  /* Borders */
  --border-subtle:  var(--ink-150);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-ink:     var(--ink-900);

  /* Primary action = "go" green */
  --accent:           var(--dart-green);
  --accent-hover:     var(--dart-green-deep);
  --accent-soft:      var(--dart-green-soft);
  --accent-contrast:  var(--white);

  /* Brand spark / highlight = red (the bullseye energy) */
  --spark:            var(--dart-red);
  --spark-hover:      var(--dart-red-deep);
  --spark-soft:       var(--dart-red-soft);
  --spark-contrast:   var(--white);

  /* Focus ring */
  --focus-ring: color-mix(in srgb, var(--dart-green) 45%, transparent);
}


/* === tokens/typography.css === */
/* ============================================================
   Pijltje gooien — Typography tokens
   ============================================================ */

:root {
  /* Families */
  --font-display: "Bricolage Grotesque", "Hanken Grotesque", system-ui, sans-serif;
  --font-body:    "Hanken Grotesque", system-ui, -apple-system, sans-serif;
  --font-mono:    "Space Mono", "SFMono-Regular", ui-monospace, monospace;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* Type scale (1.25 major-third-ish, tuned) */
  --text-3xs: 0.6875rem;  /* 11px - labels, overline           */
  --text-2xs: 0.75rem;    /* 12px                              */
  --text-xs:  0.8125rem;  /* 13px                              */
  --text-sm:  0.9375rem;  /* 15px                              */
  --text-md:  1rem;       /* 16px - body default               */
  --text-lg:  1.125rem;   /* 18px                              */
  --text-xl:  1.375rem;   /* 22px                              */
  --text-2xl: 1.75rem;    /* 28px                              */
  --text-3xl: 2.25rem;    /* 36px                              */
  --text-4xl: 3rem;       /* 48px                              */
  --text-5xl: 4rem;       /* 64px - hero                       */
  --text-6xl: 5.25rem;    /* 84px - oversized display          */

  /* Line heights */
  --leading-tight:   1.08;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;   /* overlines / eyebrows         */
}


/* === tokens/spacing.css === */
/* ============================================================
   Pijltje gooien — Spacing & layout tokens (4px base grid)
   ============================================================ */

:root {
  --space-0:   0;
  --space-1:   0.25rem;  /* 4px  */
  --space-2:   0.5rem;   /* 8px  */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-8:   2rem;     /* 32px */
  --space-10:  2.5rem;   /* 40px */
  --space-12:  3rem;     /* 48px */
  --space-16:  4rem;     /* 64px */
  --space-20:  5rem;     /* 80px */
  --space-24:  6rem;     /* 96px */
  --space-32:  8rem;     /* 128px */

  /* Layout */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 5vw, 4rem);
  --gutter:        var(--space-6);
}


/* === tokens/effects.css === */
/* ============================================================
   Pijltje gooien — Radii, borders, shadows, motion
   Soft & warm. Rounded enough to feel friendly, never bubbly.
   ============================================================ */

:root {
  /* Corner radii */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* Border widths */
  --border-thin:   1px;
  --border-medium: 1.5px;
  --border-thick:  2px;

  /* Shadows — warm-tinted, soft, low-contrast */
  --shadow-xs:  0 1px 2px rgba(33, 28, 24, 0.06);
  --shadow-sm:  0 2px 6px rgba(33, 28, 24, 0.07);
  --shadow-md:  0 6px 18px rgba(33, 28, 24, 0.09);
  --shadow-lg:  0 14px 34px rgba(33, 28, 24, 0.12);
  --shadow-xl:  0 26px 60px rgba(33, 28, 24, 0.16);

  /* A "lifted card" stack used across the product */
  --shadow-card: 0 1px 2px rgba(33,28,24,0.05), 0 8px 22px rgba(33,28,24,0.07);

  /* Focus */
  --focus-width: 3px;

  /* Motion — gentle, slightly springy, never bouncy */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0.05, 0.25, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);  /* @kind other */
  --dur-fast:    120ms; /* @kind other */
  --dur-base:    200ms; /* @kind other */
  --dur-slow:    320ms; /* @kind other */
}


/* === tokens/base.css === */
/* ============================================================
   Pijltje gooien — Base layer
   Light reset + element defaults wired to tokens.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold);
  margin: 0 0 0.4em;
  text-wrap: balance;
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); letter-spacing: var(--tracking-snug); }
h4 { font-size: var(--text-xl); letter-spacing: var(--tracking-snug); }

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

small { font-size: var(--text-xs); }

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

::selection { background: var(--accent-soft); color: var(--text-strong); }

:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Eyebrow / overline helper used throughout the brand */
.pg-overline {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--spark);
}