/* ============================================================================
   Personeel.com — Design Tokens
   Overgenomen uit het personeel.com design system (claude.ai/design,
   colors_and_type.css). Lettertypes worden per pagina geladen via Google Fonts.
   ============================================================================ */

:root {
  /* ---------- Brand colors ------------------------------------------------ */
  --brand-blue:        #192A4B;
  --brand-blue-90:     #233660;
  --brand-blue-80:     #2E4275;
  --brand-blue-10:     #E8ECF3;

  --brand-orange:      #FF5E2E;
  --brand-orange-90:   #F04C1A;
  --brand-orange-80:   #DB3F0F;
  --brand-orange-10:   #FFEEE6;

  /* ---------- Neutral / slate scale --------------------------------------- */
  --slate-50:   #F8FAFC;
  --slate-100:  #F1F5F9;
  --slate-200:  #E2E8F0;
  --slate-300:  #CBD5E1;
  --slate-400:  #94A3B8;
  --slate-500:  #64748B;
  --slate-600:  #475569;
  --slate-700:  #334155;
  --slate-800:  #1E293B;
  --slate-900:  #0F172A;

  --white: #FFFFFF;
  --black: #0A0A0A;

  /* ---------- Semantic text tokens --------------------------------------- */
  --fg-1: var(--slate-900);
  --fg-2: var(--slate-600);
  --fg-3: var(--slate-400);

  /* ---------- Semantic action tokens ------------------------------------- */
  --primary:        var(--brand-blue);
  --primary-hover:  var(--brand-blue-90);
  --primary-press:  var(--brand-blue-80);

  --accent:         var(--brand-orange);
  --accent-hover:   var(--brand-orange-90);
  --accent-press:   var(--brand-orange-80);

  /* ---------- Semantic status -------------------------------------------- */
  --success:    #20B038;
  --success-bg: #E8F8EC;
  --danger:     #DC2626;
  --danger-bg:  #FEE2E2;

  /* ---------- Type families --------------------------------------------- */
  --font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-sans:    "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---------- Shadows --------------------------------------------------- */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 16px 40px -8px rgba(15, 23, 42, 0.18), 0 4px 12px -4px rgba(15, 23, 42, 0.08);
}