/* ============================================================
   HEEYOO DESIGN SYSTEM — tokens (trimmed subset for dit dashboard)
   Bron: /mnt/skills/organization/heeyoo-design/colors_and_type.css
   Alleen de gewichten die dit dashboard gebruikt zijn meegenomen.
   ============================================================ */

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --heeyoo-better-blue:     #10bdc6;
  --heeyoo-yellow:          #fec340;
  --heeyoo-darkmode-purple: #20072c;
  --heeyoo-not-quite-white: #faf6f4;
  --heeyoo-white:           #ffffff;

  --yellow-warm-light: #feaa40;
  --purple-400: #50325a;
  --purple-300: #644678;
  --offwhite-200: #e8ddd5;
  --offwhite-300: #bebab7;
  --blue-700: #0093ad;

  --state-error:    #c0392b;
  --state-error-bg: #fbe4e0;

  --fg: var(--heeyoo-darkmode-purple);
  --fg-muted: var(--purple-300);
  --fg-subtle: var(--offwhite-300);
  --bg: var(--heeyoo-not-quite-white);

  --focus-ring-tight: 0 0 0 2px var(--heeyoo-yellow);

  --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(32, 7, 44, 0.06);
  --shadow-md: 0 4px 12px rgba(32, 7, 44, 0.08);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-base: 220ms;
}

html, body {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}