/* Beweegartsen design tokens — sampled from the logo */
:root {
  /* Brand inks */
  --ink-900: #08393a;
  --ink-800: #0a4a4a;
  --ink-700: #0a5d5d;            /* "Beweeg" deep teal */
  --ink-600: #1f6f6f;
  --ink-500: #3888b8;            /* "artsen" mid-blue */
  --ink-400: #5a9bc4;
  --ink-300: #78a8c8;
  --ink-200: #a8c8d8;
  --ink-100: #cfe0ea;
  --ink-50:  #e9f1f5;

  /* Warm neutrals */
  --paper:    #ffffff;
  --cream-50: #faf7f2;
  --cream-100: #f4ede2;
  --sand-100: #ede4d3;
  --sand-200: #d9ccb4;

  /* Cool grays */
  --gray-900: #14272a;
  --gray-700: #3d5256;
  --gray-500: #6b7e82;
  --gray-300: #b9c4c7;
  --gray-200: #d8dfe1;
  --gray-100: #ecf0f1;
  --gray-50:  #f5f7f7;

  /* Functional */
  --line:        rgba(10, 61, 61, 0.10);
  --line-strong: rgba(10, 61, 61, 0.18);
  --shadow-sm: 0 1px 2px rgba(8, 57, 58, 0.06);
  --shadow-md: 0 6px 24px -8px rgba(8, 57, 58, 0.18), 0 2px 4px rgba(8, 57, 58, 0.06);
  --shadow-lg: 0 24px 48px -16px rgba(8, 57, 58, 0.22), 0 4px 12px rgba(8, 57, 58, 0.08);

  /* Type */
  --font-serif: "Instrument Serif", "Newsreader", Georgia, serif;
  --font-sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Radii */
  --r-sm: 8px;     /* dropdown items */
  --r-md: 10px;    /* photo frames, inputs */
  --r-lg: 14px;    /* cards, treat grid */
  --r-xl: 18px;    /* visit panel, modal, contact card */
  --r-pill: 999px; /* buttons, chips, toggles */

  /* Semantic aliases */
  --bg:           var(--cream-50);
  --bg-elevated:  var(--paper);
  --bg-deep:      var(--cream-100);
  --bg-inverse:   var(--ink-900);
  --fg:           var(--gray-900);
  --fg-muted:     var(--gray-700);
  --fg-subtle:    var(--gray-500);
  --fg-inverse:   var(--paper);
  --accent:       var(--ink-700);  /* CTA / link */
  --accent-hover: var(--ink-800);
  --accent-soft:  var(--ink-50);
  --emphasis:     var(--ink-500);  /* italic word in headlines */

  /* Density */
  --space-unit: 1;
}

[data-density="compact"] { --space-unit: 0.78; }

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }