/* ===========================================================================
   Cold Candy — Design tokens
   Geport uit het Claude Design-project "Cold Candy Design System"
   (claude.ai/design/p/c8416b80-9af5-4c6d-97b7-bb4f4589f263), 1:1 met de
   bronsite in ~/AI/cold-candy (tokens/colors.css, typography.css, layout.css).
   Eén bron van waarheid voor zowel het gastenportaal als de Filament-backoffice.
   Wijzig hier, niet in de losse pagina's.

   Merk: "punchy poster" — bijna-zwarte ink, sneeuwwit, één candy-lavendel paars,
   zware high-contrast outlines i.p.v. zachte schaduwen, grote pill-radii op knoppen.
   =========================================================================== */
:root {
  /* --- Brand core --------------------------------------------------------- */
  --cc-purple:        #B785D8;
  --cc-purple-600:    #9A5FC4;
  --cc-purple-700:    #7E45A8;
  --cc-purple-200:    #E7D6F2;
  --cc-purple-100:    #F4ECFA;

  --cc-ink:           #111114;
  --cc-ink-soft:      #1C1C20;
  --cc-snow:          #FFFFFF;

  /* --- Neutral ramp ------------------------------------------------------- */
  --cc-gray-950:      #141416;
  --cc-gray-900:      #1F1F23;
  --cc-gray-700:      #3D3D44;
  --cc-gray-500:      #6E6E78;
  --cc-gray-400:      #9A9AA4;
  --cc-gray-300:      #C7C7CE;
  --cc-gray-200:      #E4E4E9;
  --cc-gray-100:      #F1F1F4;
  --cc-gray-50:       #F8F8FA;

  /* --- Status ------------------------------------------------------------- */
  --cc-success:       #2FA76A;
  --cc-warning:       #E8A23D;
  --cc-danger:        #E1483C;
  --cc-info:          var(--cc-purple-600);

  /* --- Semantic surfaces & text ------------------------------------------ */
  --surface-page:     var(--cc-snow);
  --surface-dark:     var(--cc-ink);
  --surface-card:     var(--cc-snow);
  --surface-raised:   var(--cc-ink-soft);
  --surface-muted:    var(--cc-gray-50);
  --surface-tint:     var(--cc-purple-100);

  --text-strong:      var(--cc-ink);
  --text-body:        var(--cc-gray-700);
  --text-muted:       var(--cc-gray-500);
  --text-eyebrow:     var(--cc-purple-600);

  --text-on-dark:        var(--cc-snow);
  --text-on-dark-muted:  var(--cc-gray-400);
  --text-on-dark-accent: var(--cc-purple);

  --border-hairline:  var(--cc-gray-200);
  --border-strong:    var(--cc-ink);
  --border-on-dark:   rgba(255,255,255,0.16);

  --accent:           var(--cc-purple);
  --accent-ink:       var(--cc-ink);
  --accent-hover:     var(--cc-purple-600);
  --accent-press:     var(--cc-purple-700);
  --focus-ring:       var(--cc-purple-600);

  /* --- Typography --------------------------------------------------------- */
  --font-display: "Anton", "Arial Narrow", system-ui, sans-serif;
  --font-sans:    "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "JetBrains Mono", monospace;
  --font-heading: var(--font-display);
  --font-body:    var(--font-sans);

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

  --type-hero:     clamp(3.5rem, 1.5rem + 8vw, 8rem);
  --type-display:  clamp(2.75rem, 1.4rem + 5vw, 5rem);
  --type-h1:       clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
  --type-h2:       clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --type-h3:       clamp(1.375rem, 1.1rem + 1vw, 1.75rem);

  --text-xl:   1.375rem;
  --text-lg:   1.125rem;
  --text-base: 1rem;
  --text-sm:   0.875rem;
  --text-xs:   0.75rem;

  --lh-tight:   0.95;
  --lh-snug:    1.15;
  --lh-normal:  1.55;

  --ls-display: -0.01em;
  --ls-eyebrow:  0.18em;
  --ls-button:   0.06em;

  /* --- Spacing ------------------------------------------------------------ */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.5rem;
  --space-6:   2rem;
  --space-8:   3rem;
  --space-10:  4rem;
  --space-12:  5rem;
  --space-16:  7.5rem;
  --section-pad-y: clamp(3.5rem, 2rem + 7vw, 8rem);
  --gutter:        clamp(1.25rem, 0.5rem + 3vw, 4rem);
  --content-max:   1200px;
  --prose-max:     68ch;

  /* --- Radius ------------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* --- Borders ------------------------------------------------------------ */
  --bw-hair:   1px;
  --bw-line:   2px;
  --bw-bold:   3px;

  /* --- Shadows (soft, gebruikt met mate — het merk verkiest outlines) ----- */
  --shadow-xs:  0 1px 2px rgba(17,17,20,0.06);
  --shadow-sm:  0 2px 8px rgba(17,17,20,0.08);
  --shadow-md:  0 8px 24px rgba(17,17,20,0.10);
  --shadow-lg:  0 18px 48px rgba(17,17,20,0.16);
  /* Signature "sticker"-schaduw: plat, hard, geen blur */
  --shadow-sticker:        4px 4px 0 var(--cc-ink);
  --shadow-sticker-purple: 4px 4px 0 var(--cc-purple);

  /* --- Motion ------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-pop:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    140ms;
}

/* --- Herbruikbare tekst-recepten ----------------------------------------- */
.cc-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-eyebrow);
}
.cc-display {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}
.cc-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--text-body);
}